您的位置：首页 > Web前端 > JQuery

jQuery实现简易数字摇奖程序

2014-03-25 15:41 155 查看
实现思路：首先用random生成一个四位的随机数，转换为字符串并分割返回成数组。利用each()遍历每一个.num的元素，设置其backgroundPositionY来实现滚动的效果。

使用到jQuery Easing plugin:http://gsgd.co.uk/sandbox/jquery/easing/

相关代码

HTML

<head>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
</head>
<div class="res"></div>
<div class="num_box">
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="btn">开始摇奖</div>
</div>


CSS

html,body{margin: 0;padding: 0;overflow: hidden;}
body{ background: #eee;}
.res{text-align: center;margin-top: 100px;}
.num_box{height:450px; width:750px;position:absolute;left:50%;top:140px;margin-left:-370px;z-index:8;overflow:hidden;text-align:center;}
.num_box .num{background:url(images/num.png) top center repeat-y #ccc;width:181px;height:265px;float:left;margin-right:6px;}
.num_box .btn{background-color:#89ec6a;width:264px;height:68;position:absolute;left:50%;top:300px;margin-left:-132px;cursor:pointer;clear:both; line-height: 60px;border-radius: 10px;}


JS

/*获得随机数*/
function getRanNum(){
var x=9999; //最大上限
var y=1111;//下限
var ranNum = parseInt(Math.random()*(x-y)+y);
return ranNum;
}

var isBegin=false; //用于判断是否正在执行

$(function(){
var imgH=265; //每张数字图片高度
$('.btn').click(function(){
if(isBegin){return false;} //正在执行摇奖时，防止再次点击按键执行
isBegin=true;
var ranNum=getRanNum();
$('.res').html('摇奖结果：'+ranNum);
$('.num').css('backgroundPositionY',0);
var numArr=(ranNum+'').split(''); //获取随机数转换为字符串并分割返回为数组
$('.num').each(function(index){

var ele=$(this); //当前元素jquery对象
setTimeout(function(){ //延迟执行

ele.animate({'backgroundPositionY':(imgH*50)-(imgH*numArr[index])
},{
duration: 6000+index*3000,
easing: "easeInOutCirc",
complete: function(){
if(index==3) isBegin = false;
}
});
},300*index);
});//end each()
});
});


效果：



源代码：

http://download.csdn.net/detail/monarch_lin/7096489
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航