jqueryrotate制作百度红包大放送抽奖效果
简介
现在抽奖效果在网页上已经非常常见了，以前多是 Flash 实现，但现在越来越多的使用 JavaScript 实现。两者各有优缺点，不能说哪个一定比哪个好。今天在百度糯米上看到一个“百度糯米电影红包大放送”的活动，页面中就有一个抽奖效果，挺漂亮的（抽奖效果都漂亮），我们就使用之前介绍过的 jQuery旋转插件jqueryrotate 来制作一个这样的抽奖效果。
顺便说一下，百度糯米这个抽奖效果的实现原理和 jQuery旋转插件jqueryrotate 一样，在高级浏览器中使用 CSS3 属性，在 IE6、IE7 等低版本中使用 VML。
兼容
浏览器兼容
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE6+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
制作方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.rotate.min.js"></script>
2、HTML
<div class="rotary"> <div class="rotaryArrow" id="rotaryArrow"></div> <div class="list"> <h3>中奖名单</h3> <ul> <li>1558****980</li> <li>1569****851</li> <li>1515****206</li> <li>1550****789</li> <li>1370****627</li> </ul> </div> <div class="result" id="result"> <p id="resultTxt"></p> <a href="javascript:" id="resultBtn" title="关闭">关闭</a> </div> </div>
3、CSS
.rotary {
position: relative;
width: 854px;
height: 504px;
margin: 0 auto;
background: #d71f2e url(images/bg1.png);
}
.rotaryArrow {
position: absolute;
left: 181px;
top: 104px;
width: 294px;
height: 294px;
cursor: pointer;
background-image: url(images/arrow.png);
}
.list {
position: absolute;
right: 48px;
top: 144px;
width: 120px;
height: 320px;
overflow: hidden;
}
.list h3 {
display: none;
}
.list ul {
list-style-type: none;
}
.list li {
height: 37px;
font: 14px/37px "Microsoft Yahei";
color: #ffea76;
text-indent: 25px;
background: url(images/user.png) 0 no-repeat;
}
.result {
display: none;
position: absolute;
left: 130px;
top: 190px;
width: 395px;
height: 118px;
background-color: rgba(0,0,0,0.75);
filter: alpha(opacity=90);
}
.result a {
position: absolute;
right: 5px;
top: 5px;
width: 25px;
height: 25px;
text-indent: -100px;
background-image: url(images/close.png);
overflow: hidden;
}
.result p {
padding: 45px 15px 0;
font: 16px "Microsoft Yahei";
color: #fff;
text-align: center;
}
.result em {
color: #ffea76;
font-style: normal;
}
4、JavaScript
JavaScript 是最核心的部分，在实际应用中需要与服务器进行配合，这里只是做了一个随机数，仅供参考。
$(function(){
var $rotaryArrow = $('#rotaryArrow');
var $result = $('#result');
var $resultTxt = $('#resultTxt');
var $resultBtn = $('#result');
$rotaryArrow.click(function(){
var data = [0, 1, 2, 3, 4, 5, 6, 7];
data = data[Math.floor(Math.random()*data.length)];
switch(data){
case 1:
rotateFunc(1,87,'恭喜您获得了 <em>1</em> 元代金券');
break;
case 2:
rotateFunc(2,43,'恭喜您获得了 <em>5</em> 元代金券');
break;
case 3:
rotateFunc(3,134,'恭喜您获得了 <em>10</em> 元代金券');
break;
case 4:
rotateFunc(4,177,'很遗憾，这次您未抽中奖，继续加油吧');
break;
case 5:
rotateFunc(5,223,'恭喜您获得了 <em>20</em> 元代金券');
break;
case 6:
rotateFunc(6,268,'恭喜您获得了 <em>50</em> 元代金券');
break;
case 7:
rotateFunc(7,316,'恭喜您获得了 <em>30</em> 元代金券');
break;
default:
rotateFunc(0,0,'很遗憾，这次您未抽中奖，继续加油吧');
}
});
var rotateFunc = function(awards,angle,text){ //awards:奖项，angle:奖项对应的角度
$rotaryArrow.stopRotate();
$rotaryArrow.rotate({
angle: 0,
duration: 5000,
animateTo: angle + 1440, //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
callback: function(){
$resultTxt.html(text);
$result.show();
}
});
};
$resultBtn.click(function(){
$result.hide();
});
});
标签：抽奖
