支付宝抢红包图片随机显示jQuery特效

仿支付宝抢红包图片随机显示jQuery特效

(function($) {
  var ui = {
    $grabMain: $('.grab-main')
  };
  var oConfig = window.oPageConfig;
  var interval = null;
  var move = null;
  var oPage = {
    init: function() {
      this.view();
    }
  , view: function() {
      var self = this;
      var time = 1;
      var m = 0;
        var i = 0;
        var left1 = 0;
        move = setInterval(function() {
          if (i < 10) {
          var left = Math.ceil(Math.random() * (9 - 0) + 0) * 65;
          var top = Math.ceil(Math.random() * (9 - 0) + 0) * 18;
          var shu = Math.ceil(Math.random() * (7 - 1) + 1);
          var cha = Math.abs(left - left1);
          if (cha >= 300) {
            left = left;
            left1 = left;
          }else {
            if (left < 310) {
              left = left + 300;
              left1 = left;
            }else {
              left = left - 300;
              left1 = left;
            }
          }
          $("<div class='gold-juns' data-uid='1'>").css({'left':left,'top':top,'background-image': 'url(images/' + shu + '.png)'}).appendTo(ui.$grabMain);
          $('.gold-juns').eq(0).fadeOut(400);
          setTimeout(function() {
            $('.gold-juns').eq(0).remove();
          },500)
          i++
        }else {
        }
        }, 600)
    }
  };
  oPage.init();
})($)

<div class="wrap">
	<div class="grab">
		<div class="grab-top"></div>
		<div class="grab-main">
			<div class="gold-juns" data-uid="1"></div>
		</div>
	</div>
</div>

　　

html{
  font-size: 47%;
  zoom:1;
}
body{
  overflow: hidden;
  height: 100%;
}
.grab-main{
  position: relative;
  width: 780px;
  height: 390px;
  background-color: #fff;
  -webkit-tap-highlight-color:rgba(255,0,0,0);
}
.gold-juns{
  position: absolute;
  left:0px;
  top:0px;
  width: 220px;
  height: 225px;
  background-color: none;
  z-index: 200;
  background-image: url(../images/1.png);
  background-repeat: no-repeat;
  background-position: center;
}

　　via：http://www.datouwang.com/jiaoben/443.html