老虎机

最新推荐文章于 2024-06-06 00:54:04 发布

weixin_33885676

最新推荐文章于 2024-06-06 00:54:04 发布

阅读量60

点赞数

原文链接：https://my.oschina.net/thc/blog/374184

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实用jQuery数字滚动摇奖老虎机抽奖特效代码 - JS代码网</title>
<script type="text/javascript" src="js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<style>
html,body{margin:0;padding:0;overflow:hidden;}
.main{height:1000px;position:relative;margin:0 auto;}
.num_box{height:450px;position:absolute;left:50%;top:340px;margin-left:-370px;z-index:8;overflow:hidden;text-align:center;}
.num{background:url(images/num.png) top center repeat-y;width:181px;height:265px;float:left;margin-right:6px;}
.btn{background:url(images/btn_start.png) 0px 0px no-repeat;width:264px;height:89px;position:absolute;left:50%;bottom:50px;margin-left:-132px;cursor:pointer;clear:both;}
</style>
</head>
<body>
<div class="main_bg">
  <div class="main">
    <div id="res" style="text-align:center;color:#fff;padding-top:15px;"></div>
    <div class="num_mask"></div>
    <div class="num_box">
      <div class="num"></div>
      <div class="num"></div>
      <div class="num"></div>
      <div class="num"></div>
      <div class="num"></div>
    </div>
    <div class="btn"></div>
  </div>
</div>
</body>
</html>
<script>


$(function(){
 var u = 265;
 var begin = 12340;
    var result = 91543;


 var beginNums = (begin+'').split('');
    $(".num").each(function(index){
        $(this).css('backgroundPositionY', 10*u - beginNums[index]*u);
    });


    var i = 0,
    	numLength = 0,
    	startTime = [],
    	resultTmp = result;
    do {
 numLength ++;
 var gapTime = i * 500;
 startTime.push((gapTime >= 2000) ? 2000 : gapTime);
 i ++;
 resultTmp = (resultTmp - resultTmp%10)/10;
    } while(resultTmp > 0) ;
    startTime.reverse();


 $('.btn').click(function(){


 var num_arr = (result+'').split('');
 $(".num").each(function(index){
 var _num = $(this);
 setTimeout(function() {
 _num.animate({
 backgroundPositionY: -(u*20*index) - (u*num_arr[index])
 },{
 duration: 500 + index * 500,
 easing: "swing",
 complete: function() {
 clearBgPostion(_num, num_arr[index], u);
 }
 });
 }, startTime[index]);
 });
 });


 /**
 *	复位背景图片的定位值
 *  param: $num 待复位图片Jquery对象
 *  param: currNum 图片当前展示的数值
 *  param: NO_IMG_HEIGHT 每个数字图片像素高
 */
 function clearBgPostion($num, currNum, NO_IMG_HEIGHT) {
 $num.css('backgroundPositionY', (10 - currNum) * NO_IMG_HEIGHT);
 }
});
</script>

转载于:https://my.oschina.net/thc/blog/374184