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动画效果
113910 学习 · 1502 问题
相似问题