运动的封装+调用案例（摘）

Posted 2021-02-12 hilxj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了运动的封装+调用案例（摘）相关的知识，希望对你有一定的参考价值。

 运动函数：
functionstartMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;
        
    obj.iTimer = setInterval(function() {
        
        var iBtn = true;
                    
        for ( var attr in json ) {
                            
            var iTarget = json[attr];
            
            if (attr == ‘opacity‘) {
                iCur = Math.round(css( obj, ‘opacity‘ ) * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }
            
            iSpeed = ( iTarget - iCur ) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            
            if (iCur != iTarget) {
                iBtn = false;
                if (attr == ‘opacity‘) {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = ‘alpha(opacity=‘+ (iCur + iSpeed) +‘)‘;
                } else {
                    obj.style[attr] = iCur + iSpeed + ‘px‘;
                }
            }
            
        }
        
        if (iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }
        
    }, 30);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}
 测试案例：
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放大</title>
    <script src="move.js"></script>
    <style>
        *{margin: 0;padding: 0}
        #div1{width: 100px;height: 100px;background: #ddd;position: relative;top: 200px;left: 200px;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
    var div1=document.getElementById("div1");
    div1.onmouseover=function(){
        startMove(this,{width:200,height:200,left:150,top:150})
    }
    div1.onmouseout=function(){
        startMove(this,{width:100,height:100,left:200,top:200})
    }
    </script>
</body>
</html>
 

以上是关于运动的封装+调用案例（摘）的主要内容，如果未能解决你的问题，请参考以下文章