JavaScript抖動的實現

時間 2019-11-10

原文原文鏈接

實現原理

抖動的實現原理其實就是讓節點元素進行位置的偏移，因此在實現此功能的時候最好節點元素進行絕對定位，而後來修改它們的top和left值。
這裏有幾個要點，第一是要準備好須要偏移的頻率，這個能夠經過把偏移距離放到數組中來控制偏移距離，偏移距離跳動幅度越小，效果就越平穩。定時器時間決定了節點抖動的速度。css

代碼以下：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Made with Thimble</title>
    <link rel="stylesheet" href="style.css">
    <style>
        img{
            width:300px;
            height: 400px;
            position:absolute;
            top:20px;
            left:150px;
        }
    </style>
</head>
<body>
<img id="img1" src="https://newimg.uumnt.cc:8092/Pics/2017/0622/03/06.jpg">
</body>
<script>
    var oImg = document.getElementById('img1');
    oImg.onclick = function(){
        //this 到函數裏面做用域會變，這裏賦值先變成局部
        var that = this;
        shaking(that,'top',function(){
            shaking(that,'left');
        });
    };

    // 抖動函數封裝 attr：left水平抖動 top：垂直抖動
    function shaking(obj,attr,callback){
        var pos = parseInt(getStyle(obj,attr));
        var arr = [];
        var num = 0;
        for(var i=20;i>0;i-=2){
            arr.push(i,-i);
        }
        arr.push(0);
        clearInterval(obj.shaking);
        obj.shaking = setInterval(function(){
            obj.style[attr] = pos + arr[num] + 'px';
            num ++;
            if(num === arr.length){
                clearInterval(obj.shaking);
                callback && callback();
            }
        },50);
    }

    // 獲取節點對象的樣式屬性值
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj,false)[attr];
        }
    }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。