jQuery仿淘宝彩票换一注动画效果特效,IE8以下浏览器不支持动画旋转效果。
JS代码
<scripttype="text/javascript"src="jquery-1.11.2.min.js"></script>
<scripttype="text/javascript">
jQuery(document).ready(function($){vary=3;$("input").click(function(event){$("ulli").each(function(index,el){///开始///随机函数
functioncreateRandom(num,from,to){
vararr=[];
for(vari=from;i<=to;i++)
arr.push(i);
arr.sort(function(){
return0.5-Math.random();
});
arr.length=num;
returnarr;
}
functioncreateRandom2(num,from,to)
{
vararr=[];
varjson={};
while(arr.length<num)
{
//产生单个随机数
varranNum=Math.ceil(Math.random()*(to-from))+from;
//通过判断json对象的索引值是否存在来标记是否重复
if(!json[ranNum])
{
json[ranNum]=1;
arr.push(ranNum);
}
}
returnarr;
}
///结束///随机函数
vararr=[];//声明一个空的数组
arr=createRandom2(7,1,33)/*将随机生成的0-33的7个数字赋值给arr*/
//定义了sort的比较函数将arr数组里面的数字
arr.sort(function(a,b){
returna-b;
});//利用循环让每个li取到arr数组的值
for(vari=0;i<=$("ulli").size();i++){
$("ulli").eq(i).text(arr);
}
/*每个圆转的度数等于y*360*/
y++;
$("ulli").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
$("ulli").each(function(index,el){
if(parseInt($(this).text())<10){
varcc=$(this).text();
$(this).text("0"+cc)
};
});
});});
</script>
下载
|
|