多组抖动效果的图片js封装

昨天提到了单个图片的抖动效果,那么今天来写一下多组图片实现抖动效果的封装,这种效果也许在日常的项目中会用到,简单封装一下,就不用每次都写差不多一样的代码了,好的来看html和css的布局,其实很简单就是两张图片:

<style>
        img{position:absolute; top:200px; left:300px; width:180px;}
        #img1{left:560px;}
</style>

<body>
<!--需求:点击图片,图片会抖动几下-->
<img id="img" width="180" src="img/pic1.jpg"/>
<img id="img1" width="180" src="img/pic2.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");
        var oImg1=document.getElementById("img1");
        //添加点击事件
        oImg.onclick=fn;
        oImg1.onclick=fn;
            //两个点击效果相同,那么就可以重用代码了
            function fn(){
                var _this=this;
                shake(_this,'left',function(){//这里的回调函数实现的效果就是上下抖动
                    shake(_this,'top'); //注意:若没有任何声明的情况下,回调函数里不能直接用this,所以 _this=this不能少
                })
            }
        //抖动效果的代码封装需要的参数也就是对象,方向,回调函数
        function shake(obj,attr,endFn){
            var pos=parseFloat(getStyle(obj,attr));
            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(obj.timer);
            obj.timer=setInterval(function(){
                //让图片的left跟随数组里的值变化就会实现左右移动效果
                obj.style[attr]=pos+arr[num]+"px";
                num++;
                if(num===arr.length){
                    clearInterval(obj.timer);
                    endFn && endFn();
                }
            },50)
        }
    };

</script>

好了,就是这样了,我写的比较啰嗦,也是希望看的比较明白,这只是两张图片点击之后的抖动效果,若是多组也是适用的,当然对于其他对象,比如说表单等等也都试用,还是那句话万变不离其宗,可以多试试!

好了,今天就到这里了!加油!

posted @ 2017-12-25 19:35  麦兜家园  阅读(401)  评论(0编辑  收藏  举报