转盘的抽奖特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
/*background: url(../img/bg-lottery.png) no-repeat;
background-size: 100% 100%;*/
font-size: 0.15rem;
border-radius: 100%;
display: flex;
display: -webkit-flex;
width: 2.8rem;
height: 2.8rem;
margin-left: 0.35rem;
position: relative;
padding: 0.2rem;
background: url(../img/ly-plate-c.gif) no-repeat;
background-size: 100% 100%;
}
img{
width: 2.8rem;
height: 2.8rem;
}
li{
list-style: none;
display: none;
}
span{
display: block;
background: url(../img/playbtn.png) no-repeat;
background-size: 100% 100%;
width: 0.6rem;
height: 0.6rem;
position: absolute;
margin-top: 1.2rem;
margin-left: 1.1rem;
}
</style>
</head>
<body>
<ul class="zhuanpanfu">
<li class="zhuanpanli">理财金2000元</li>
<li class="zhuanpanli">谢谢参与</li>
<li class="zhuanpanli">理财金5200元</li>
<li class="zhuanpanli">京东の卡</li>
<li class="zhuanpanli">谢谢参与</li>
<li class="zhuanpanli">理财金1000元</li>
<img src="img/bg-lottery.png"/>
<span></span>
</ul>
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
var viewWidth = $(window).width();
var viewWidth_10=viewWidth/100;
document.documentElement.style.fontSize=document.documentElement.clientWidth/viewWidth_10+'px';
var j=0;
$('span').click(function(){
var i=1;
j++;
var timeflag= setInterval(function(){
if(i<=800){
i+=5;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>800&i<=1300){
i+=4;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>1300&i<=1700){
i+=3;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>1700&i<=1900){
i+=2;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>1900&i<=2000){
i+=1;
$('img').css('transform',"rotate("+i+"deg)");
}
else if(i>2000&i<=2100){
i+=0.6;
$('img').css('transform',"rotate("+i+"deg)");
}
else if(i>2100&i<=2160){
i+=0.4;
$('img').css('transform',"rotate("+i+"deg)");
}
else{
clearInterval(timeflag)
}
},1)
})
})
</script>
</html>
