简介

现在抽奖效果在网页上已经非常常见了，以前多是 Flash 实现，但现在越来越多的使用 JavaScript 实现。两者各有优缺点，不能说哪个一定比哪个好。今天在百度糯米上看到一个“红包大放送”的活动，页面中就有一个抽奖效果，挺漂亮的(抽奖效果都漂亮)，这个抽奖效果的实现原理和 jQuery旋转插件jqueryrotate 一样，在高级浏览器中使用 CSS3 属性，在 IE6、IE7 等低版本中使用 VML。

兼容

浏览器兼容IE6+ ✔Edge ✔Chrome ✔Firefox ✔Opera ✔Safari ✔

制作方法

1、引入文件

2、HTML

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,'恭喜您获得了 1 元代金券');

break;

case 2:

rotateFunc(2,43,'恭喜您获得了 5 元代金券');

break;

case 3:

rotateFunc(3,134,'恭喜您获得了 10 元代金券');

break;

case 4:

rotateFunc(4,177,'很遗憾，这次您未抽中奖，继续加油吧');

break;

case 5:

rotateFunc(5,223,'恭喜您获得了 20 元代金券');

break;

case 6:

rotateFunc(6,268,'恭喜您获得了 50 元代金券');

break;

case 7:

rotateFunc(7,316,'恭喜您获得了 30 元代金券');

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();

});

});