js运动-多物体运动
来源:互联网 发布:linux 合并多个文件夹 编辑:程序博客网 时间:2024/05/02 08:20
基本步骤
1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素,添加事件
3.定义startMove函数,需要两个参数,当前“做运动”的元素,和目标值target
注意问题:在多物体运动中,所有的东西不能公用;
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); // 第一步 for(var i=0;i<liTags.length;i++){ // 第二步 liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } var timer = null; function startMove(obj,iTarget) { // 第三步,2个参数 clearInterval(timer); timer = setInterval(function () { var iSpeed = (iTarget - obj.offsetWidth)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理 if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth+iSpeed+'px'; } },30); }</script>
问题:
当移入移出速度比较快的时候,就会出现有的li回不到原来的样子,卡在半路了;这是因为所有的li公用了一个定时器造成的;
当鼠标移入第一个li时,调用startMove开启一个定时器;鼠标移除li时,也需要开启一个定时器让li回到原来的位置,li走到半路上,我们移入第二个li,首先会清除定时器,这时候第一个li就卡到半路了。
解决这个问题:让每个li拥有自己的timer去控制他们的变化,在for循环的时候,给每个里定义自己的一个timer
liTags[i].timer = null;// 给每个li都添加一个timer接着在starMove里面每次用的定时器都是当前li 自己的,就不会互相干扰了。
这里由之前的timer变成了obj.timer (当前对象自己的timer);到这里就没问题了。
完整代码如下:
<body><ul> <li></li> <li></li> <li></li> <li></li></ul></body>
加点样式:
<style> ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; background: lightblue; }</style>
完整js代码
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } function startMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var iSpeed = (iTarget - obj.offsetWidth)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(obj.offsetWidth == iTarget){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth+iSpeed+'px'; } },30); }</script>
接着在看一个例子:多物体运动-改变透明度
<script> window.onload = function () { var aImgs = document.getElementsByTagName('img'); for(var i=0;i<aImgs.length;i++){ aImgs[i].timer = null; aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性 aImgs[i].onmouseover = function () { startMove(this,30); } aImgs[i].onmouseout = function () { startMove(this,100); } } } // var alpha = 100; 这里alpha在多物体运动里 不能公用 function startMove(obj,iTarget) { clearInterval(obj.timer); var iSpeed = (iTarget - obj.alpha)/10; iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed); obj.timer = setInterval(function(){ if(obj.alpha == iTarget){ clearInterval(obj.timer); }else{ obj.alpha += iSpeed; obj.style.opacity =obj.alpha/100; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; } },30); }</script>
0 0
- js运动-多物体运动
- JS多物体运动
- js运动技术--多物体同时运动
- js多物体不同运动
- JS多物体透明度运动
- js-多物体运动框架
- js物体链式运动
- Js运动动画系列4--多物体缓冲运动
- Js运动动画系列5--多物体运动-透明度
- js动画2 多物体运动
- js实现多物体不同运动框架
- 多物体缓冲运动js代码大全
- 多物体运动动画js脚本
- HTML+CSS+JS实现多物体运动
- js运动-匀速运动、透明度、多物体的运动、多属性运动
- Js运动动画系列7--多物体运动-设置样式属性做不同的运动
- Js运动动画系列9--多物体同时运动-封装运动框架
- 多物体运动
- Codevs2189数字三角形2题解
- C++当中的引用
- Android软件开发之获取通讯录联系人信息
- 获取带事件值的二维码
- 关于Android 自定义属性 declare-styleable 的学习
- js运动-多物体运动
- 压力测试工具Tsung安装和使用
- Android中解析复杂的JSON数据
- 网络安全术语解释
- Android volley 解析(四)之缓存篇
- JSON 数据格式
- 内存管理注意点!!!
- 看不到会比较好办科级干部
- MFC中获取窗口句柄及相关函数