jquery php 抽奖 jquery-rotate.js制作红包大放送抽奖效果

简介

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

兼容

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

制作方法

1、引入文件

2、HTML

中奖名单

1558****9801569****8511515****2061550****7891370****627

关闭

3、CSS.rotary{

position:relative;

width:854px;

height:504px;

margin:0auto;

background:#d71f2eurl(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;

}

.listh3{

display:none;

}

.listul{

list-style-type:none;

}

.listli{

height:37px;

font:14px/37px"MicrosoftYahei";

color:#ffea76;

text-indent:25px;

background:url(images/user.png)0no-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);

}

.resulta{

position:absolute;

right:5px;

top:5px;

width:25px;

height:25px;

text-indent:-100px;

background-image:url(images/close.png);

overflow:hidden;

}

.resultp{

padding:45px15px0;

font:16px"MicrosoftYahei";

color:#fff;

text-align:center;

}

.resultem{

color:#ffea76;

font-style:normal;

}

4、JavaScript

JavaScript 是最核心的部分，在实际应用中需要与服务器进行配合，这里只是做了一个随机数，仅供参考。$(function(){

var$rotaryArrow=$('#rotaryArrow');

var$result=$('#result');

var$resultTxt=$('#resultTxt');

var$resultBtn=$('#result');

$rotaryArrow.click(function(){

vardata=[0,1,2,3,4,5,6,7];

data=data[Math.floor(Math.random()*data.length)];

switch(data){

case1:

rotateFunc(1,87,'恭喜您获得了1元代金券');

break;

case2:

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

break;

case3:

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

break;

case4:

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

break;

case5:

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

break;

case6:

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

break;

case7:

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

break;

default:

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

}

});

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

});

});

如果觉得《jquery php 抽奖 jquery-rotate.js制作红包大放送抽奖效果》对你有帮助，请点赞、收藏，并留下你的观点哦！