怎样实现图片抖动效果

发布日期:2020年8月19日 23:37 星期三

  • 正文内容
  • 相关推荐

 

需求:点击图片时,图片会左右抖动,也可以上下抖动。

具体代码如下:

 

html:

<img src="./img/19.jpg" alt="" id="img1">

css:

img {

    position: absolute;

    top: 200px;

    left: 300px;

}

js:

<script src="doMove.js"></script>

<script>

    window.onload = function(){

        var img1 = document.getElementById('img1');

 

        img1.onclick = function(){

            // 先获得img1的原来left值,在此基础上进行抖动;parseInt()是把300px的单位去掉只留数字

            var pos = parseInt(getStyle(img1,'left'));

            var arr = [];//20,-20,18,-18,16,-16,...存放抖动的频率

            var timer = null;//开启定时器

            var num = 0;//一般只要有数组,那么必定有数字跟着变化;数组的第0个,第1个...

 

            for(var i =20;i>0;i-=2){//左右抖动的幅度第一次为20px,然后减2

                arr.push(i,-i);

            }

            arr.push(0);

            // alert(arr);//测试一下

            // 有抖动的频率之后,要开启定时器让它进行抖动

            clearInterval(timer);//开启定时器之前要先把定时器关闭,防止连续多次点击

            timer = setInterval(function(){

                img1.style.left = pos + arr[num] + 'px';//原来的位置pos,加上数组中每一个数字

                num++;

                if(num === arr.length){//如果数字等于数组的长度(就是全部抖完了),关闭定时器

                    clearInterval(timer);

                }

            },50);

        }

    }

</script>

说明:

1、要先引入我们原来封装好的动画函数doMove.js,getStyle()函数就是这个函数里面的函数;

2、parseInt( )是把300px的单位去掉只留数字300;

3、上下抖动,只要把left改为top就可以。

趣乐分享-趣乐资源网
如有密码均为:www.itql.cn
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:209993299  

作者资料
描述: 90后草根站长!不忘初心,方得始终!

本文标签:

文章标题:怎样实现图片抖动效果

文章链接:https://www.itql.cn/post-3112.html

版权声明:若无特殊注明,本文皆为《钱哆哆》原创,转载请保留文章出处。