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

jq动画设置图片抽奖(修改效果版)的相关教程结束。