动画封装

最新推荐文章于 2025-01-03 17:10:39 发布

原创最新推荐文章于 2025-01-03 17:10:39 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

应用案例专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个简单的动画封装方法，通过JavaScript实现元素在鼠标悬停时的动态变化效果，包括高度、宽度和透明度的平滑过渡。代码示例中详细展示了如何使用setInterval和clearInterval来控制动画的执行和停止，以及如何通过计算步长来实现平滑的动画效果。

动画封装

<body>
    <div></div>
    <script src='donghua copy.js'></script>
    <script>
        var div = document.getElementsByTagName('div')[0]
        
            div.onmouseover = function(){
                move(this,{'height':500,'width':500,'opacity':100},function(){
                    move(div,{'height':100,'width':100,'opacity':0.1})
                }) 
            }
        function move(obj,json,call){
    clearInterval(obj.times)
    obj.times = setInterval(function(){
        var flag = true
        for(var attr in json){
            if(attr =='opacity'){
                var styles = getStyle(obj,attr)*100
            }else{
                var styles = parseInt(getStyle(obj,attr));
            }
            var step = (json[attr]-styles)/10
            step = step>0 ? Math.ceil((json[attr]-styles)/10): Math.floor((json[attr]-styles)/10)
            if(attr =='opacity'){
                obj.style[attr]= (step+styles)/100
            }else{
                obj.style[attr] =(styles+step) +'px'
            }
            if(json[attr]!=styles){
                flag = false
            }
            // console.log(step)
            if(flag){
                clearInterval(obj.times)
                call&&call()   
            }  
        }   
    },100) 
}
function getStyle(obj,attr){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]
}
    </script>
</body>