一组图片上下抖动

html：

<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
...

css：

img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
}

js：

window.onload = function(){
    var imgs = document.getElementsByTagName('img');

    for(var i = 0;i<imgs.length;i++){
        imgs[i].style.left = 80+i*110+'px';//让图片之间有缝隙
        imgs[i].onmouseover = function(){//鼠标经过，图片上下抖动
            shake(this,'top');//调用抖动函数
        }
    }

    // ①封装获取某个元素的样式函数
    function getStyle(obj,attr){//obj:你要获取谁，attr:所获取的对象的什么样式
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
    }

    // ②抖动函数
    function shake(obj,attr,endFn){
    //obj谁来抖动，attr是哪个元素值进行改变（横着抖，竖着抖），endFn回调函数（就是抖完之后干嘛）
        // 先获得图片原来left值，在此基础上进行抖动;parseInt()是把300px的单位去掉只留数字
        var pos = parseInt(getStyle(obj,attr));
        var arr = [];//20，-20,18，-18,16，-16，...存放抖动的频率
        var shake = null;//开启定时器,因为动画doMove.js函数中也有定时器，为了避免重复
        var num = 0;//一般只要有数组，那么必定有数字跟着变化；数组的第0个，第1个...

        for(var i =20;i>0;i-=2){
            arr.push(i,-i);
        }
        arr.push(0);
        // alert(arr);//测试一下
        // 有抖动的频率之后，要开启定时器让它进行抖动
        clearInterval(obj.shake);//开启定时器之前要先把 定时器关闭，防止连续多次点击
        obj.shake = setInterval(function(){
            obj.style[attr] = pos + arr[num] + 'px';//原来的位置pos,加上数组中每一个数字
            num++;
            if(num === arr.length){//如果数字等于数组的长度（就是全部抖完了），关闭定时器
                clearInterval(obj.shake);
                // 看是否有回调函数，如果有就执行，没有就不执行
                endFn&&endFn();                     
            }
        },80);
    }
}

注意：这里没有引入封装的函数库，直接复制到js代码中的，如果想做抖动动画效果，要用到两个函数，一个获取样式的函数getStyle( )，一个抖动函数shake( );