js链式动画封装

最新推荐文章于 2021-06-16 18:12:52 发布

Gui_wawa

最新推荐文章于 2021-06-16 18:12:52 发布

阅读量300

点赞数

分类专栏： js特效

本文链接：https://blog.csdn.net/Gui_wawa/article/details/52851400

版权

js特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height:100px;
            background-color: green;
            position: absolute;

        }
    </style>
</head>
<body>
<input type="button" value="显示动画的效果" id="btn" />
<div id="dv"></div>

<script>
    //获取元素
    function my$(id){
        return document.getElementById(id);
    }
    //获取属性值
    function getAttrValue(element,attr){
        return element.currentStyle?element.currentStyle[attr]:window.getComputedStyle(element,null)[attr]||0;
    }
    //加入透明度和层级的缓动动画函数的封装
    function animate(element,json,fn){
        clearInterval(element.timeId);
        element.timeId=setInterval(function(){
            var flag=true;
            for(var attr in json){
                if(attr=="opacity"){//当属性为opacity的情况
                    var current=getAttrValue(element,attr)*100;
                    var target=json[attr]*100;
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current=current+step;
                    element.style[attr]=current/100;
                }else if(attr=="zIndex"){//当属性是zIndex的情况
                    element.style[attr]=json[attr];
                }else{//一般属性的情况
                    var current=parseInt(getAttrValue(element,attr));
                    var target=json[attr];
                    var step=(target-current)/10;
                    step=step>0?Math.ceil(step):Math.floor(step);
                    current=current+step;
                    element.style[attr]=current+"px";
                }
                if(current!=target){
                    flag=false;
                }
            }
            if(flag){
                clearInterval(element.timeId);
                if(fn){
                    fn();
                }
            }
        },20);
    }
    //调用函数：点击按钮层移动
    my$("btn").οnclick=function(){
       animate(my$("dv"),{"left":400,"top":300,"width":200,"height":100,"opacity":0.3},
       function(){animate(my$("dv"),{"left":600,"top":200,"width":300,"height":200,"opacity":1});});
    };
</script>
</body>
</html>

Gui_wawa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js链式动画封装

Title div{ width: 200px; height:100px; background-color: green; position: absolute; } //获取元素 function my$(id){
复制链接

扫一扫