Heim > Artikel > Web-Frontend > Implementierungscode der segmentierten nativen JS-Animation

Implementierungscode der segmentierten nativen JS-Animation

小云云Original: 2018-03-12 15:33:081328Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich den Implementierungscode der segmentierten nativen js-Animation mit und hofft, allen zu helfen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>函数的封装(多属性),动画的停止-分段动画</title>
    <style type="text/css">
    * {        margin: 0;        padding: 0;    }

    .box {        width: 100px;        height: 100px;        background-color: #F10250;        margin: 50px;        position: relative;    }
    </style>
    <script type="text/javascript">
    function getStyle(element, styleName) {
        if (element.currentStyle) {            return element.currentStyle[styleName];
        } else {            return window.getComputedStyle(element, null)[styleName];
        }
    }    function animate(element, json, fun) {
        //element.timer的意思是给当前元素添加一个timer属性
        //在这里是添加一个计时器
        clearInterval(element.timer);        var isStop = false;
        element.timer = setInterval(function() {
            for (var key in json) {
                isStop = true;                //通过in循环,获取到的是json中的css属性名key
                //通过json[key],可以获取key属性的值
                var target = json[key];                var current = parseInt(getStyle(element, key));                var setp = (target - current) / 10;                //当current的值是一个大于target的值的时候
                //此时setp是一个小于零的数,此时向上取整为零
                //所以需要判断setp是否大于零,大于零向上取整,小于零向下取整
                setp = setp > 0 ? Math.ceil(setp) : Math.floor(setp);
                current += setp;
                console.log(current);                //只要有一个属性动画没有结束,就不停止动画
                //不能用只要有一个属性动画完成就停止动画的思路,
                //因为此时不是所有属性的动画都已经完成
                //不停止动画
                if (Math.abs(target - current) > Math.abs(setp)) {
                    isStop = false;
                } else {                    //强制将current = target
                    current = target;
                }
                element.style[key] = current + "px";                //停止动画
                if (isStop) {
                    clearInterval(element.timer);                    //添加回调函数
                    //判断传入的是一个函数
                    if (typeof fun == "function") {
                        fun();
                    }
                }
            }
        }, 10);
    }
    window.onload = function() {
        var box = document.getElementsByClassName("box")[0];
        box.onclick = function() {
            animate(box, {
                left: 400,
            }, function() {
                animate(box, {
                    width: 500
                }, function() {
                    animate(box, {
                        height: 500
                    }, null);
                });
            });
        }

    }    </script></head><body>
    <p class="box"></p>
    <p class="hezi" style="background-color: green"></p></body></html

Das obige ist der detaillierte Inhalt vonImplementierungscode der segmentierten nativen JS-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie einen Entscheidungsbaum in JavascriptNächster Artikel：So erstellen Sie einen Entscheidungsbaum in Javascript

In Verbindung stehende Artikel

Mehr sehen