jQuery模拟窗口抖动效果

 

  input{margin-top: 20px;}

  .center{margin-left: 50%;transform: translate(-50%);}

  .img{display:block;position:absolute;top:100px;}

  $(":button").click(function () {

   var len = 4, //晃动的距离，单位像素

   c = 16, //晃动次数，4次一圈

   step = 0, //计数器

   img = $("img"),

   off = img.offset();

   this.step = 0;

   timer = setInterval(function () {

    var set = pos();

    img.offset({ top: off.top + set.y * len, left: off.left + set.x * len });

    if (step++ >= c) {

     img.offset({ top: off.top, left: off.left }); //抖动结束回归原位

     clearInterval(timer);

    }

    // console.log(step)

   }, 45);

  });

  function pos() {

   this.step = this.step ? this.step : 0;

   this.step = this.step == 4 ? 0 : this.step;

   var set = {

    0: { x: 0, y: -1 },

    1: { x: -1, y: 0 },

    2: { x: 0, y: 1 },

    3: { x: 1, y: 0 }

   }

   return set[this.step++];

  }