以下是 jQuery仿淘宝彩票换一注动画特效代码 的示例演示效果:
部分效果截图:
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>