美文网首页
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 之完美运动封装

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