jQuery仿淘宝彩票换一注动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿淘宝彩票换一注动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery仿淘宝彩票换一注动画特效</title>
</head>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	ul,ol{
		list-style: none;
	}
	ul{
		overflow:hidden;
		float: left;
	}
	ul li{
		width:50px;
		height:50px;
		text-align:center;
		background:#cb0000;
		border-radius:50%;
		float: left;
		margin:0 10px;
		text-align:center;
		line-height:50px;
		color:#fff;
		font-size:18px;
		font-weight:bold;
	}
	.y{
		transition: all 0.5s;		
		-moz-transition: all 0.5s;		
		-webkit-transition: all 0.5s;		
		-s-transition: all 0.5s;		
		-o-transition: all 0.5s;		
	}
	.e{
		transition: all 1s;		
		-moz-transition: all 1s;		
		-webkit-transition: all 0.8s;		
		-s-transition: all 1s;		
		-o-transition: all 1s;		
	}
	.s{
		transition: all 1.5s;		
		-moz-transition: all 1.5s;		
		-webkit-transition: all 1.2s;		
		-s-transition: all 1.5s;		
		-o-transition: all 1.5s;		
	}
	.s{
		transition: all 2s;		
		-moz-transition: all 2s;		
		-webkit-transition: all 1.6s;		
		-s-transition: all 2s;		
		-o-transition: all 2s;		
	}
	.w{
		transition: all 2.5s;		
		-moz-transition: all 2.5s;		
		-webkit-transition: all 2s;		
		-s-transition: all 2.5s;		
		-o-transition: all 2.5s;		
	}
	.l{
		transition: all 3s;		
		-moz-transition: all 3s;		
		-webkit-transition: all 2.4s;		
		-s-transition: all 3s;		
		-o-transition: all 3s;		
	}
	.q{
		transition: all 3.5s;		
		-moz-transition: all 3.5s;		
		-webkit-transition: all 2.8s;		
		-s-transition: all 3.5s;		
		-o-transition: all 3.5s;		
	}
	.rotate{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
	}
	.rotate{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
	}

</style>
<body>
<DIV style="width:600px;margin:0 auto;text-align:left;margin-top:100px;"> 
<ul>
	<li class="y">01</li>
	<li class="e">08</li>
	<li class="s">16</li>
	<li class="s">24</li>
	<li class="w">30</li>
	<li class="l">33</li>
	<li class="q" style="background:#3768da;">07</li>
</ul>
<input type="button" value="换一注" style="float:left;
width:100px;height:50px;lin-height:50px;background:#eee;">
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {

		var y=3;

		$("input").click(function(event) {

			$("ul li").each(function(index, el) {

				///开始///随机函数
				function createRandom(num ,from ,to )

				{
					var arr=[];
					for(var i=from;i<=to;i++)
						arr.push(i);
					arr.sort(function(){
						return 0.5-Math.random();
					});
					arr.length=num;
					return arr;
				}
				 
				function createRandom2(num , from , to)
				{
					var arr=[];
					var json={};
					while(arr.length<num)
					{
						//产生单个随机数
						var ranNum=Math.ceil(Math.random()*(to-from))+from;
						//通过判断json对象的索引值是否存在 来标记 是否重复			        
						if(!json[ranNum])
						{
							json[ranNum]=1;
							arr.push(ranNum);
						}					         
					}
					return arr;	     
				}
				///结束///随机函数
				
				var arr=[];//声明一个空的数组
				arr=createRandom2(7,1,33)/*将随机生成的0-33的7个数字赋值给arr*/
				//定义了sort的比较函数将arr数组里面的数字
				arr.sort(function(a,b){
					return a-b;
				});

				//利用循环让每个li取到arr数组的值
				for(var i=0;i<=$("ul li").size();i++){		 				
					$("ul li").eq(i).text(arr[i]);
				}
				/*每个圆转的度数等于  y*360*/
				y++;
				$("ul li").eq(index).css({
					"transform": 'rotate('+y*360+'deg)',
					"-moz-transform": 'rotate('+y*360+'deg)',
					"-webkit-transform": 'rotate('+y*360+'deg)',
					"-o-transform": 'rotate('+y*360+'deg)',
					"-s-transform": 'rotate('+y*360+'deg)'
				});

			});
			//判断随机生成的是不是小于10如果是的就给前面加上0如生成的是1那么就显示01
			$("ul li").each(function(index, el) {
				if (parseInt($(this).text())<10) {
					var cc=$(this).text();
					$(this).text("0"+cc)
				};
			});
		});

	});
</script>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)