获奖转盘

最新推荐文章于 2024-09-29 13:54:20 发布
amnotsuperior
最新推荐文章于 2024-09-29 13:54:20 发布
阅读量527
点赞数
分类专栏：特效
特效专栏收录该内容
21 篇文章
订阅专栏
<!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>jquery.rotate插件实现抽奖的旋转效果</title>
<!-- http://www.lanrenzhijia.com/jquery/jquery-rotate0109.html -->
 <style>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.rotary{position:relative;width:854px;height:504px;margin:50px auto 0 auto;background:#d71f2e url(http://demo.lanrenzhijia.com/2015/draw0109/images/bg1.png);}
.rotaryArrow{position:absolute;left:181px;top:104px;width:294px;height:294px;cursor:pointer;background-image:url(http://demo.lanrenzhijia.com/2015/draw0109/images/arrow.png);}
.list{position:absolute;right:48px;top:144px;width:120px;height:320px;overflow:hidden;}
.list h3{display:none;}
.list li{height:37px;font:14px/37px "Microsoft Yahei";color:#ffea76;text-indent:25px;background:url(http://demo.lanrenzhijia.com/2015/draw0109/images/user.png) 0 no-repeat;}
.list li a{color:#ffea76; text-decoration:none;}
.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(http://demo.lanrenzhijia.com/2015/draw0109/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;}
</style>
</head>
<body>
<style>
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;}
</style>




<div class="baidu_ads">
<script type="text/javascript">
var sogou_ad_id=395091;
var sogou_ad_height=90;
var sogou_ad_width=960;
</script>
<script type='text/javascript' src='http://images.sohu.com/cs/jsfile/js/c.js'></script>
</div>

<span style="display:none;">
<script src="http://s94.cnzz.com/stat.php?id=4106941&web_id=4106941" language="JavaScript"></script>
</span><!-- 代码部分begin  -->
<div class="rotary">
	<div class="rotaryArrow" id="rotaryArrow"></div>
	<div class="list">
		<h3>中奖名单</h3>
		<ul>
			<li><a href="http://www.lanrenzhijia.com.com">懒人之家</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://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.rotate.min.js"></script>
<script>
$(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>
<!-- 代码部分 end -->
</body>
</html>