簡介

現在抽獎效果在網頁上已經非常常見了，以前多是 Flash 實現，但現在越來越多的使用 JavaScript 實現。兩者各有優缺點，不能說哪個一定比哪個好。今天在百度糯米上看到一個“紅包大放送”的活動，頁面中就有一個抽獎效果，挺漂亮的(抽獎效果都漂亮)，這個抽獎效果的實現原理和 jQuery旋轉插件jqueryrotate 一樣，在高級瀏覽器中使用 CSS3 屬性，在 IE6、IE7 等低版本中使用 VML。

兼容

瀏覽器兼容IE6+ ?Edge ?Chrome ?Firefox ?Opera ?Safari ?

制作方法

1、引入文件

2、HTML

中獎名單

• 1558****980
• 1569****851
• 1515****206
• 1550****789
• 1370****627

關閉

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

});

});

總結

以上是生活随笔為你收集整理的jquery php 抽奖,jquery-rotate.js制作红包大放送抽奖效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。