原生js实现图片抖动效果

Posted 麦兜家园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现图片抖动效果相关的知识,希望对你有一定的参考价值。

今天来写一个关于图片抖动的效果,需求是:点击图片,让其抖动几下停止(类似于苹果手机填错密码之后会抖一下的效果),其实想要实现这个效果,原理就是,点击之后,让其左移动下然后右移动一下(每移动一下减几像素知道减到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。可以试一下哦!

好了,今天就这样了!

以上是关于原生js实现图片抖动效果的主要内容,如果未能解决你的问题,请参考以下文章

原生JavaScript实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]

手把手教你原生 JS+WebGL 实现3D图片效果!

一步步教你js原生瀑布流效果实现

原生JS offsetX和offsetY引起抖动

基于原生js的图片轮播效果简单实现

原生js实现淘宝图片切换