Mileswongke
2016-11-01 10:24
当我为多个li用for循环设置相同链式运动时,firebug提示
JS代码如下:
/* * @Author: Marte * @Date: 2016-10-30 21:31:35 * @Last Modified by: Marte * @Last Modified time: 2016-11-01 10:01:40 */ 'use strict'; /* * @Author: Marte * @Date: 2016-10-30 13:06:56 * @Last Modified by: Marte * @Last Modified time: 2016-10-30 19:25:29 */ 'use strict'; window.onload=function () { var oLi=document.getElementsByTagName("li"); //鼠标移入 for (var i = 0; i < oLi.length; i++) { oLi[i].timer=null; //给每个li加定时器 oLi[i].onmouseover=function () { startMove(this,"width",400,function () { startMove(this,"height",160); }); } }; //鼠标移出 for (var i = 0; i < oLi.length; i++) { oLi[i].timer=null; //给每个li加定时器 oLi[i].onmouseout=function () { startMove(this,"height",80); } }; }; //笔记:获取样式属性,解决offsetWidth指的是包括边框宽度的问题 function getStyle (obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; //IE浏览器 } else{ return getComputedStyle(obj,false)[attr]; //火狐浏览器 }; } //定义动画框架 function startMove (obj,attr,iTarget,fun) { var oLi=document.getElementsByTagName("li"); clearInterval(obj.timer); //清除计时器 obj.timer=setInterval(function () { var icur=0; if (attr=="opacity") { //加if处理透明度问题 //透明度有时是小数,乘100符合习惯整数写法,使用Math.round()处理计算机不能准确存储小数问题,例如:计算机中0.07*100=7.000000001 icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); }; var speed=(iTarget-icur)/10; //使其速度和到终点距离关联,实现缓冲运动 //解决上面方法中导致最后一点距离不对的问题(iTarget-oMain.offsetLeft)/10;最后不是iTarget speed=speed>0?Math.ceil(speed):Math.floor(speed); if (icur==iTarget) { clearInterval(obj.timer); if(fun){ fun(); } }else{ //必须加else,不然不能同时执行下面语句 //obj.style.width改写成obj.style["width"],是为了是属性可以变成可以传入的参数 if (attr=="opacity") { //加if处理透明度问题 obj.style.filter="alpha(opacity:"+(icur+speed)+")"; //IE浏览器 obj.style.opacity=(icur+speed)/100; //火狐浏览器 } else{ obj.style[attr]=icur+speed+"px"; //透明度有bug } } },30) }
我也试过把回调函数放到for循环执行,并加oLi.timer=null;还是不可以……
拜托大神解答,手动微笑《·-·》;
window.onload下第一段for
for (var i = 0; i < oLi.length; i++) { oLi[i].timer=null; //给每个li加定时器 oLi[i].onmouseover=function () { var self=this; //保存当前this startMove(this,"width",400,function () { startMove(self,"height",160); //this要换成self }); } };
JS动画效果
113920 学习 · 1500 问题
相似问题