obj.timer问题

来源:5-1 JS链式动画

Mileswongke

2016-11-01 10:24

http://img.mukewang.com/5817fb5f00018d9705460101.jpg

当我为多个li用for循环设置相同链式运动时,firebug提示http://img.mukewang.com/5817fbf80001c29504080057.jpg

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;还是不可以……

拜托大神解答,手动微笑《·-·》;

写回答 关注

1回答

  • stone310
    2016-11-01 14:13:40

    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动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113920 学习 · 1500 问题

查看课程

相似问题