美文网首页
javascript 之完美运动封装

javascript 之完美运动封装

作者: 夜息白鸽 | 来源:发表于2017-08-21 22:16 被阅读0次

getStyle获取元素样式 兼容IE火狐

function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}

function startMov dom 操作元素运动
json元素这里可以同时操作多种元素变化,把style当成数组传进去
列如:startMove(oDiv, {width: 102, height: 200, opacity: 100});
fn在这里代表回调函数,有则执行

function startMove(obj, json, fn)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;     //
        for(var attr in json)
        {       
            var iCur=0;         
            if(attr=='opacity')
            {
                iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                iCur=parseInt(getStyle(obj, attr));
            }       
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?            
                        Math.ceil(iSpeed):Math.floor(iSpeed);                   
            if(iCur!=json[attr])
            {
                bStop=false;
            }
            
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
            }
            else
            {
                obj.style[attr]=iCur+iSpeed+'px';
            }
        }
        
        if(bStop)
        {
            clearInterval(obj.timer);
            
            if(fn)
            {
                fn();
            }
        }
    }, 30)
}

有经验的程序员肯定发现里面还有一些坑,比如还想控制DOM树的startMov执行时间,事实上也能当成参数往里传。
var iSpeed=(json[attr]-iCur)/8;
还有setInterval 后面的执行时间 均可控制执行时间,
这里本人使用了看的较为舒服的/8速度

相关文章

  • javascript 之完美运动封装

    getStyle获取元素样式 兼容IE火狐 function startMov dom 操作元素运动json元素...

  • 完美运动框架

    完美运动框架封装 完美运动框架调用 封装完美运动框架遇到的问题? 1.timer问题如果我们只保存一个timer变...

  • 原生JavaScript之完美运动框架

    在这里呢,我们先来说下关于完美运动框架的封装思路。 想让一个物体运动呢,我们必须给那个物体加上定位属性;其次想让一...

  • Javascript 之封装(Package)

    来源:程序员食堂 各位old铁~们 大噶好啊~ 今天食堂上餐:Javascript 之封装(Package) (原...

  • javaScript中的运动库封装

    这个库的封装的目的是为了让调用者更好的使用,而不必要思考参数的位置或者参数的个数的问题;闭包里面的函数,如果需要给...

  • JavaScript封装减速运动框架

    假设需要实现一个div 盒子的宽高减速运动变化过渡,首先要思考的问题就是,现在div盒子的宽高是多少?要变化到多少...

  • JavaScript完美运动框架进阶之旅

    导语: 运动框架的实现思路运动,其实就是在一段时间内改变left、right、width、height、opaci...

  • 封装自己的JavaScript库视频@小四

    第一节:封装自己的JavaScript库@小四: 第二节:封装自己的JavaScript库: 第三节:封装自己的J...

  • javascript对象的遍历、内存分布和封装特性

    javascript对象的遍历、内存分布和封装特性 一、javascript对象遍历 1.javascript属性...

  • javascript 封装

    常规封装 (将具体初始化放在构造函数里面) 常规封装(放一个初始化方法在构造函数里面) 类jQuery 封装 原文...

网友评论

      本文标题:javascript 之完美运动封装

      本文链接:https://www.haomeiwen.com/subject/dznhdxtx.html