原生js实现图片抖动效果

时间：2020-12-13 19:45:15

今天来写一个关于图片抖动的效果，需求是：点击图片，让其抖动几下停止（类似于苹果手机填错密码之后会抖一下的效果），其实想要实现这个效果，原理就是，点击之后，让其左移动下然后右移动一下（每移动一下减几像素知道减到0），然后将其放入定时器内，让其慢慢自动停下来。来看代码布局：

<style>
        #img{position:absolute;left:30px;}
    </style>

<body>
<!--需求：点击图片，图片会抖动几下-->
<img id="img" width="180" src="img/pic4.jpg"/>
</body>

接下来就是js的实现：

<script>

    //兼容不同浏览器获取行间样式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

    window.onload=function(){
        //第一步先追加多个div
        var oImg=document.getElementById("img");
        //添加点击事件
        oImg.onclick=function(){
            //先获取图片自身所在的left值
            var pos=parseFloat(getStyle(oImg,"left"));

            var arr=[];
            var num=0;
            var timer=null;
            //抖动频率de数组，一正一负[20,-20,18,-18...]
            for(var i=20;i>0;i-=2){
                arr.push(i,-i)
            }
            arr.push(0);
            //启用定时器前先关闭定时器
            clearInterval(timer);
            
            timer=setInterval(function(){
                //让图片的left跟随数组里的值变化就会实现左右移动效果
                oImg.style.left=pos+arr[num]+"px";

                num++;
                if(num===arr.length){
                    clearInterval(timer);
                }
            },50)

        };
        
    };
    
</script>

 这样就实现了点击一下图片，图片将会抖动几下慢慢停下了。抖动原理其实就是元素的自动左右移动，所以一定要用到setInterval。可以试一下哦！

好了，今天就这样了！

标签：

相关文章