jq动画设置图片抽奖(修改效果版)
效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动,与之前的下过略有不同.
CSS和html没有变化
修改了部分的js代码
<script type="text/javascript">
var u = 150;//ImageWidth
var c = '13345689090'
var btn = $(".btn");
btn.bind("click",function(){//给元素绑定点击事件
start();//调用函数
})
function start() {
var Html = btn.attr('id');
if(Html == "stop") {
stop(c);
btn.unbind("click");//移除绑定的事件
}else{
startRun();
btn.attr('id', 'stop');
}
}
function startRun() {
$(".num").each(function(index) {
var _num1 = $(this);
if (index == 0) {//因为视觉效果上第一位数字速度较慢
index=2
}
_animate(_num1, u * 10 * (index + 1),1000)
})
function _animate(el, backgroundPositionY, speed) {
el.animate({
backgroundPositionY: backgroundPositionY,
},{
complete: function() { //complete回调函数
speed: speed,
el.css({
backgroundPositionY: 0
});
_animate(el, backgroundPositionY, speed); //自身调用
}
}, "linear")
}
}
function stop(custNo) {
var num_arr = custNo.split('');
$(".num").each(function(index) {
var _num = $(this);
setTimeout(function() {
_num.stop(true,false); //停止动画
_num.animate({
backgroundPositionY: (u * 10 * (index + 1)) - (u * num_arr[index])
}, {
complete: function() {
if(index == 10) {
if(!_num.is(":animated")){
btn.attr('id', 'again');
btn.click(function(){
start();
btn.attr("id","stop");
})
}
}
}
}, 1000 * (index + 1),"linear");
}, 800 * index + 1000); //1000 (指定数据依次的出现速度) index + 100(控制点击停止之后,指定数据出现的时间)
});
}
</script>
关于jq的动画ainmate的详解:
https://www.cnblogs.com/sntetwt/archive/2014/07/10/3835242.html
http://www.365mini.com/page/jquery-animate.htm