體驗效果：http:///keleyi/phtml/jqtexiao/33.htm
以下是html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3+jQuery紅色喜慶抽獎網頁特效 - </title>
<link rel="stylesheet" type="text/css" href="http:///keleyi/phtml/jqtexiao/33/css/style.css" />
</head>
<body class="keBody">
<h1 class="keTitle">CSS3+jQuery紅色喜慶抽獎網頁特效</h1>
<div class="kePublic">
<!--效果html開始-->
<div class="rotary">
<div class="rotaryArrow" id="rotaryArrow"></div>
<div class="list">
<h3>中獎名單</h3>
<ul>
<li><a href="http://" style="color:#ffea76;"></a></li>
<li>1569****851</li>
<li>1515****206</li>
<li>1550****789</li>
<li>1370****627</li>
<li>1828****215</li>
<li>1589****572</li>
<li>1583****825</li>
<li>1396****805</li>
<li>1332****261</li>
<li>1884****863</li>
<li>1384****955</li>
<li>1897****137</li>
<li>1342****973</li>
<li>1558****071</li>
<li>1554****168</li>
<li>1562****018</li>
<li>1805****856</li>
<li>1354****809</li>
<li>1383****364</li>
</ul>
</div>
<div class="result" id="result">
<p id="resultTxt"></p>
<a href="javascript:" id="resultBtn" title="關閉">關閉</a>
</div>
</div>
<script src='http:///keleyi/pmedia/jquery/jquery-1.11.2.min.js'></script>
<script type="text/javascript" src="http:///keleyi/phtml/jqtexiao/33/js/jquery.rotate.min.js"></script>
<script type="text/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();
});
});
</script>
<!--效果html結束-->
<div class="clear"></div>
</div>
<div class="keBottom">
<p class="keTxtP">網頁特效集錦---更多特效請訪問 <a class="keUrl" href="http://" target="_blank"></a></p>
<p class="keTxtP">本站導航：
<a href="http:///" target="_blank" class="cor_bs">網站建設</a> |
<a href="http:///" target="_blank" class="cor_bs">網頁素材</a> |
<a href="http:///" target="_blank" class="cor_bs">網頁特效</a> |
<a href="http:///" target="_blank" class="cor_bs">設計分享</a> |
<a href="http:///" target="_blank" class="cor_bs">建站教程</a> |
<a href="http:///" target="_blank" class="cor_bs">網站模版</a> |
<a href="http:///" target="_blank" class="cor_bs">酷站賞析</a>
</p>
<p class="keTxtP">＊尊重他人勞動成果，轉載請自覺注明出處！注：此代碼為【整理/原創特效】僅供學習交流，請勿用於商業用途。
<a target="_blank" href="http://" class="button red" title="北京網站建設,網頁特效QQ交流群-">加入QQ交流群</a></p>
</div>
</body>
</html>