本文实例讲述了原生JS实现的碰撞检测功能。分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.gxlcms.com JS碰撞检测</title> <style> div{width:100px;height:100px; } #box{background:red; position:absolute; } #box1{background:green;position:absolute;top:300px; left:300px;} </style> <script> //两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求...
什么是前后端同构 明确三个概念:「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA 单页面应用;「同构渲染」指前后端共用 JS,首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。 感觉前端的确是折腾,之前还在流行前后端分离,现在怎么又要做前后端同构了? 原因是现在流行的SPA前端单页面应用比较沉重,首次访问需要加载文...
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素...
前言 插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star 准备 <div id="wrap"></div>页面中的容器标签不限制,只需给个id就行 var address = new Address({wrapId: wrap,showArr: [provinces,citys,areas],beforeCreat:function(){console.log("beforeCreat")},afterCreat:function(){console.log(afterCreat);} })wrapId:"wrap" // 此处的wrap就是...
本文实例讲述了原生JS实现循环Nodelist Dom列表的4种方式。分享给大家供大家参考,具体如下: function $(id) {return document.getElementById(id); } var _PAGE = {timeListDom: $(timeList) }; var spanDoms = _PAGE.timeListDom.querySelectorAll(span), domLen = spanDoms.length; // 第一种方式:原生for循环 for (var i = 0; i < domLen; i++) {var v = spanDoms[i];// do something you want deal with DOM } // 第二种方式...
瀑布流布局中的图片有一个核心特点—等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。 基础功能实现 首先我们定义好一个有 20 张图片的容器, <body><style>#waterfall {position: relative;}.waterfall-box {float: left;width: 200px;}</style> </body> <div id="waterfall"><img src="images/1.png" class="waterfall-box"><img src="images...
整了一下 之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个空变量保存文本 for(var i=0 ; i<lrcArr.length ; i++) { var arr = lrcArr[i].split("]"); /*console.log(arr[1]);*/...
本文实例讲述了原生JS实现的双色球功能。分享给大家供大家参考,具体如下: 先来看看运行效果:具体代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>www.gxlcms.com - JS双色球</title><style>#datePicker {width: 100px;height: 30px;line-height: 30px;;border-radius: 10px;border: 1px solid #5098a5;text-align: center;cursor: pointer;}#number {height: 100px;float: left;margin-top: 2...
本文实例讲述了原生JS实现的多个彩色小球跟随鼠标移动动画效果。分享给大家供大家参考,具体如下: 实现方法: 每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果 实现代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>小球运动</title><style type="text/css">p {border-radius: 50%;width: 30px;height: 30px;position: absolute;...
本文实例讲述了原生JS实现多个小球碰撞反弹效果。分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐...
前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读。 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力;关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧。小游戏的实现逻辑上可能并不完善,也许会有一些 ...
废话不多说,直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaa</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bbbbbbbbbbbbbb</a> <a...
在一些支持用 markdown 写文章的网站,后台写作页面,一般都是支持 markdown 即时预览的,也就是将整个页面分成两部分,左半部分是你输入的 markdown 文字,右半部分则即时输出对应的预览页面,例如下面就是 CSDN 后台写作页面的 markdown 即时预览效果:本文不是阐述如何从 0 实现这种效果的(后续 很可能 会单出文章,),抛开其他,单看页面主体中左右两个容器元素,即 markdown 输入框元素和预览显示框元素 本文要探讨的是,当...
PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现。 下面是移动端手指滑动轮播图的完整代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> *{margin:0;padding:0;} li{list-style:none;} .lb...
用到一些封装好的运动函数,主要是定时器 效果为图片和图片的描述定时自动更换。 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">ul,li,p,h3 {padding: 0;margin: 0;list-style: none;}img {border: none;vertical-align: top;}#bg_box {width: 1000px;height: 590px;margin: 50px auto;position: relative;background: url(img/bg1.jpg) no-repeat;}.pic {width: 440px;height: 274px...