原生Js深さ解析パッケージ運動関数思想

(1)単純パッケージ運動関数(幅、高さ、左、右)

//   
        //            style    
        function getStyle(domobj, attr) {
            if (window.getComputedStyle) {//    
                return getComputedStyle(domobj, null)[attr]
            } else {//IE
                return domobj.currentStyle[attr]
            }
        }
        //   
        //      
        function Move(domobj, json) {
            //  flag true,       ；
            var flag = true;
            //         ，                。
            clearInterval(domobj.timer);
            domobj.timer = setInterval(function () {
                for (var attr in json) {
                    //     
                    var target = json[attr];
                    //       
                    //     ，      px ；
                    var value = Math.floor(getStyle(domobj, attr));
                    //             
                    var ispeed = (target - value) / 8;
                    //       ，  0    ，  0，    ；
                    ispeed = ispeed > 0 ? ispeed = Math.floor(ispeed) : ispeed = Math.ceil(ispeed);
                    //  style   
                    domobj.style[attr] = value + ispeed + 'px'
                }
                //         :          
                if (value !== target) {
                    flag = false;
                }
                //      ，     
                if(flag){
                    clearInterval(domobj.timer)
                }
            }, 20)
        }
        

多属性パッケージ運動関数の最適化(幅の高さと左右＋透明度＋コールバック関数)
透明度については、下の＊100は初期値が0～1であるため、まず範囲を拡大します.目標値の透明度を取得して入ってきます.
1~100は次の計算に便利です.

 function Move(domobj, json, fn) {
            //  flag true,       ；
            var flag = true;
            //         ，                。
            clearInterval(domobj.timer);
            domobj.timer = setInterval(function () {
                for (var attr in json) {
                    //     
                    var target = json[attr];
                    //       
                    //     ，      px ；
                    //         opacity,     *100     
                    if (attr === 'opacity') {
                        var value = Math.floor(getStyle(domobj, attr) * 100)
                    } else {
                        //            
                        var value = Math.floor(getStyle(domobj, attr));
                    }
                    //             
                    var ispeed = (target - value) / 8;
                    //       ，  0    ，  0，    ；
                    ispeed = ispeed > 0 ? ispeed = Math.floor(ispeed) : ispeed = Math.ceil(ispeed);
                    //  style   
                    //    ，        px,   px;
                    if (attr === 'opacity') {
                        domobj.style[attr] = value + ispeed;
                    }
                    domobj.style[attr] = value + ispeed + 'px';
                }
                //         :          
                if (value !== target) {
                    flag = false;
                }
                //      ，     
                if (flag) {
                    clearInterval(domobj.timer);
                    if (fn) {//fn     ，               //        。
                        fn()
                    }
                }
            }, 20)
        }

このように運動を進める.例えば:幅を広くして、辺の長さまたは右に移動してから左に移動する(コールバック関数を利用して)
下の運動は幅が広くて、下に移動して、左に移動します.
fnはコールバック関数で、終点まで移動するとこの関数を実行します.
フローは、最初の呼び出し(幅を広げる＋コールバック関数を追加する)です.
第二コール(プラス＋コールバック関数追加)
3回目の呼び出し:下へ移動する+コールバック関数を追加します.
第4コール(右に移動し、コールバック関数を追加しません)))
効果を同時に現れたいなら、全部第二の対象に書いて、一回呼び出してもいいです.

 odiv.onmousemove = function () {
            setMove(odiv, {
                width: 300,
            }, function () {
                setMove(odiv, { height: 300, }, function () {
                    setMove(odiv, { top: 300, }, function () {
                        setMove(odiv, {
                            left: 300,
                        })
                    })
                })
            })
        }

ZWの意見をあなたと共有します.ニックネームとWeChat、交流を歓迎します.