JavaScript 多物体动画
2016-05-06 00:00
417 查看
摘要: 制作的第一个多物体动画
心得:
1.逻辑必须清晰,所以代码要写简洁,注意大小写,甚至拼写错误.
2.注意变量的作用域.
3.编程考验的是一个人的思想深度和逻辑.
4.写代码时一定要专注,不然小错不断,大错待发.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多个动画</title> <style type="text/css"> *{margin: 0;padding: 0} ul{margin-top: 100px;} li{background-color: #123; width: 200px; height: 50px; margin-bottom: 30px; list-style: none;} </style> <script type="text/javascript"> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].timer=i; aLi[i].onmouseover=function(){ startMove(this,400); } aLi[i].onmouseout=function(){ startMove(this,200); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(iTarget-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget){ clearInterval(obj.timer); } else { obj.style.width=obj.offsetWidth+speed+'px'; } }, 50) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
心得:
1.逻辑必须清晰,所以代码要写简洁,注意大小写,甚至拼写错误.
2.注意变量的作用域.
3.编程考验的是一个人的思想深度和逻辑.
4.写代码时一定要专注,不然小错不断,大错待发.
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享