码迷,mamicode.com
首页 > Web开发 > 详细

js动画--一个小bug处理下

时间:2016-01-10 15:42:32      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

对于上面的课程我们很好的处理了一个小bug,那么我们现在讲程序进行优化一下,前一节的程序中,我们处理处理的属性都是写死了的。为了我们能够很好的对某个属性进行操作的话。我们这样来设置。

js文件

window.onload=function(){
    var ls=document.getElementsByTagName("li");
    for(var i=0,l=ls.length;i<l;i++){
        ls[i].timer=null;
        ls[i].onmouseover=function(){
            startMove(this,"width",400);
        }
        ls[i].onmouseout=function(){
            startMove(this,"height",400);
        }
    }
}
function startMove(object,attr,Target){
    //alert(parseInt(getStyle(object,attr));
    clearInterval(object.timer);
    object.timer=setInterval(function(){
        var speed=(Target-parseInt(getStyle(object,attr)))/10;
        speed=speed>0? Math.ceil(speed):Math.floor(speed);
        if(parseInt(getStyle(object,attr))==Target){
            clearInterval(object.timer);
        }else{
            object.style[attr]=parseInt(getStyle(object,attr))+speed+"px";//这个地方,我们设置属性通过object.style[attr]来设置的。
        }
    },50)
}
function getStyle(object,attr){
    if(object.currentStyle){
        return object.currentStyle[attr];//IE浏览器
    }else if(getComputedStyle){
        return getComputedStyle(object,false)[attr];//火狐浏览器
    }
}

 

js动画--一个小bug处理下

标签:

原文地址:http://www.cnblogs.com/yuaima/p/5118470.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!