仿QQ绿钻抽奖转盘
简介
腾讯心悦会员的一个活动，抽奖转盘做的不错，同样，还是使用 jQuery旋转插件jqueryrotate 制作。由于 IE9 以下的版本 jqueryrotate 只支持 img 标签，所以这次换成了 img 标签，但只可以转动一次，因为已经改变了 DOM，原来的对象已经没有了。
制作方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.rotate.min.js"></script>
2、HTML
<div class="dowebok"> <div class="rotary"> <img class="hand" src="images/z.png" alt=""> </div> <div class="list"> <strong>100%中奖</strong> <h4>中奖用户名单</h4> <ul> <li> <span>154**88</span> <span>获得1个月绿钻</span> </li> <li> <span>6161***034</span> <span>获得11个月绿钻</span> </li> <li> <span>2349***224</span> <span>获得1个月绿钻</span> </li> <li> <span>433***54</span> <span>获得2个月绿钻</span> </li> <li> <span>5154***234</span> <span>获得4个月绿钻</span> </li> <li> <span>3213***123</span> <span>获得2个月绿钻</span> </li> <li> <span>898****362</span> <span>获得9个月绿钻</span> </li> </ul> </div> </div>
3、CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft Yahei";
background-color: #15734b;
}
h1 {
width: 900px;
margin: 40px auto;
font: 32px "Microsoft Yahei";
text-align: center;
color: #fff;
}
.dowebok {
width: 894px;
height: 563px;
margin: 0 auto;
background-image: url(images/s3_bg.png);
}
.rotary {
position: relative;
float: left;
width: 504px;
height: 504px;
margin: 20px 0 0 20px;
background-image: url(images/g.png);
}
.hand {
position: absolute;
left: 144px;
top: 144px;
width: 216px;
height: 216px;
cursor: pointer;
}
.list {
float: right;
width: 300px;
padding-top: 44px;
}
.list strong {
position: relative;
left: -45px;
display: block;
height: 65px;
line-height: 65px;
font-size: 32px;
color: #ffe63c;
}
.list h4 {
height: 45px;
margin: 30px 0 10px;
line-height: 45px;
font-size: 24px;
color: #fff;
}
.list ul {
line-height: 36px;
list-style-type: none;
font-size: 12px;
color: #fff;
}
.list span {
display: inline-block;
width: 94px;
}
4、JavaScript
$(function(){
var $hand = $('.hand');
$hand.click(function(){
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
data = data[Math.floor(Math.random()*data.length)];
switch(data){
case 1:
rotateFunc(1,16,'恭喜你抽中了1个月绿钻');
break;
case 2:
rotateFunc(2,47,'恭喜你抽中了2个月绿钻');
break;
case 3:
rotateFunc(3,76,'恭喜你抽中了3个月绿钻');
break;
case 4:
rotateFunc(4,106,'恭喜你抽中了4个月绿钻');
break;
case 5:
rotateFunc(5,135,'恭喜你抽中了5个月绿钻');
break;
case 6:
rotateFunc(6,164,'恭喜你抽中了6个月绿钻');
break;
case 7:
rotateFunc(7,193,'恭喜你抽中了7个月绿钻');
break;
case 8:
rotateFunc(7,223,'恭喜你抽中了8个月绿钻');
break;
case 9:
rotateFunc(7,252,'恭喜你抽中了9个月绿钻');
break;
case 10:
rotateFunc(7,284,'恭喜你抽中了10个月绿钻');
break;
case 11:
rotateFunc(7,314,'恭喜你抽中了11个月绿钻');
break;
case 12:
rotateFunc(7,345,'恭喜你抽中了12个月绿钻');
break;
}
});
var rotateFunc = function(awards,angle,text){
$hand.stopRotate();
$hand.rotate({
angle: 0,
duration: 5000,
animateTo: angle + 1440,
callback: function(){
alert(text);
}
});
};
});
标签：抽奖
