动画封装

最新推荐文章于 2023-06-04 20:47:57 发布

菲允龙歌

最新推荐文章于 2023-06-04 20:47:57 发布

阅读量107

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100714738

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

动画封装

<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>