javascript运动框架 博客分类： web前端技术JavaScript 框架JavaScript运动框架move

项目中要用到轮播，并且还是宽屏自适应的轮播效果，雷同alipay首页的轮播效果差不多。

打算用原生js来实现。

所以必然要用到js 的运动框架那么下面就先分享这个

 

下面就呈现js 的运动框架代码（网上有很多的）

封装好的运动框架Move(obj,attr,iTarget),可直接调用：

可用于设置width、border、fontSize、marginLeft、opacity等许多常见属性值的变速变化，实现各种有趣效果。

兼容IE和FF。

/****************
    *
    *   IE-BUG:
    *   在IE中，设置opacity属性时，元素样式中需要设置opacity属性，才能读取到opacity值。
    *
    *   obj：元素对象。   attr：用引号包围的属性名。   iTarget：属性目标值。
    *
    *****************/


    function Move(obj,attr,iTarget){
        clearInterval(obj.timer);//关闭前一个定时器，解决对同个对象同时调用多个Move()时，定时器叠加问题。使用obj.timer给每个调用Move()的对象赋予各自的定时器，防止多个对象同时调用Move()时，同用一个定时器，而导致相关干扰问题。
        obj.timer=setInterval(function(){
            var cur=0;//创建一个变量，用于存储 attr属性每时每刻的值
            if(attr=="opacity"){
            //针对在FF中opacity属性值为浮点数值问题，将属性值 四舍五入、转换成浮点型。乘以100，使opacity属性值与IE统一为百分数
                cur=Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                cur=parseInt(getStyle(obj,attr));//将除opacity外的属性(width/fontSize/MarginLeft等)的初始值 转换为整型
            }
            var speed=(iTarget-cur)/10;//创建 递减的速度speed变量。实现属性值的变速改变

            speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整，解决浏览器忽略小于1px的数值 导致运动结束时，离目标值Itarget少几个像素的问题

            if(iTarget==cur){//当目标值等于目标值时，结束定时器
                clearInterval(obj.timer);
            }else{
                    cur+=speed;//当前值cur 加上 递减的速度值speed
                if(attr=="opacity"){
                    // 分别对IE和FF设置opacity属性值
                    obj.style.filter="alpha(opacity:"+cur+")"; //for IE
                    obj.style.opacity=cur/100;   //for FF
                }else{
                    obj.style[attr]=cur+"px"; //给指定属性attr 添加值cur+speed
                }
            }
        },30);
    }
    //getStyle()函数 用于兼容IE和FF：获取 对象的 非行间样式中的属性的值。 obj：元素对象。 name：属性名。
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];//for IE
        }else{
            return getComputedStyle(obj,false)[name];//for FF
        }
    }

 

期待下面的一篇就会是js轮播图的实现：

类似：http://www.huawei.com/cn/

or  https://www.alipay.com/?src=alipay.com 结合品