无线随机运动-原生JS详解
来源:互联网 发布:中学生网络诈骗 编辑:程序博客网 时间:2024/05/22 14:18
让一个块在页面中无线随机运动
相当于不停地给物体一个随机的目标
<style type="text/css"> div{ width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }</style><body> <div id="target"></div></body><script>//封装运动函数;function getStylecss(obj,oStyle){ if(obj.currentStyle){ return obj.currentStyle[oStyle]; }else{ return getComputedStyle(obj,false)[oStyle]; } } function motion(obj,json,options){ options=options || {}; options.time=options.time || 1000; options.easing=options.easing || 'linear'; clearInterval(obj.timer); var start={}; var distance={}; for(var name in json){ start[name]=parseFloat(getStylecss(obj,name)); if(isNaN(start[name])){ switch(name){ case 'left': start[name]=obj.offsetLeft; break; case 'top': start[name]=obj.offsetTop; break; case 'right': start[name]=obj.offsetRight; break; case 'bottom': start[name]=obj.offsetBottom; break; } } distance[name]=json[name]-start[name]; } var n=0; var count=Math.floor(options.time/30); obj.timer=setInterval(function(){ n++; for(var name in json){ switch(options.easing) { case 'linear': var a=n/count; var cur=start[name]+distance[name]*a; break; case 'ease-in': var a=n/count; var cur=start[name]+distance[name]*(a*a*a); break; case 'ease-out': var a=1-n/count; var cur=start[name]+distance[name]*(1-a*a*a); break; } if(name == 'opacity'){ obj.style[name]=start[name]+n*distance[name]/count; }else{ obj.style[name]=start[name]+n*distance[name]/count+'px'; } } if(n==count){ clearInterval(obj.timer); options.complete && options.complete(); } },30); } //页面加载完执行以下代码 window.onload=function(ev){ var oDiv=document.getElementByID('target'); //封装一个求随机数的函数; function rnd(n,m){ return parseInt(Math.random()*(m-n)+n); } var oEvent=ev||event; var mTop=oEvent.clientHeight-oDiv.offsetHeight;//防止div身体部分跑到可视区外面,所以需要减掉物体本身的宽高; var mLeft=oEvent.clientWidth-oDiv.offsetWidth; function move(){ motion(oDiv,{left:rnd(1,mLeft),toprnd(1,mTop)},{complete:function(){ move();//让这个函数永远执行;}}); } move(); }</script>
0 0
- 无线随机运动-原生JS详解
- 穿墙运动-原生JS详解
- 分块运动-原生JS详解
- 斜三角分块运动-原生JS详解
- 圆的运动-原生JS详解
- 原生js螺旋运动
- js原生运动
- 原生JS 封装运动函数
- 原生JS实现运动效果
- 原生Js完美运动框架(缓冲运动和弹性运动)
- 【原生JS组件】javascript 运动框架
- 原生js实现时间版运动框架
- 原生js封装元素运动函数
- 用原生js封装运动框架
- 原生纯js完美缓冲运动轮播图
- 原生JS如何运动ajax封装函数
- 原生JS事件详解
- 原生JS实现获取随机验证码
- 让我们来比较C#,C++和Java之间重写虚函数的区别
- 分析软件工程师必备技能
- SSL/TLS的Handshake过程与javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure异常
- HDU 1215 七夕节(打表)
- 各浏览器页面滚动值(scrollTop)的获取与设定。
- 无线随机运动-原生JS详解
- youcompleteme unavailable: no module named "future"解决
- 全网服务器数据备份解决方案
- 【OpenJudge】配对碱基链
- MySQL Group Replication调研剖析
- 微信小程序java实现AES解密并获取unionId
- 简单Demo让你分分钟理解Android中的文件存储
- Luogu P1102 A-B数对+map
- Manipulator explore