在做一个转盘的抽奖程序，想请教一下如何控制指针只能有一次指向case，如果指向了已有的那么就指向下一个case？（本人小白）<!DOCTYPE html><html><head><meta charset="utf-8"><title>jqueryrotate制作机锋网积分抽奖效果演示_dowebok</title><style>/* 页面 css */* { margin: 0; padding: 0;}h1 { width: 900px; margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}.vad { margin: 50px 0 5px; font-family: Consolas,arial,宋体; text-align:center;}.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}.vad a:hover { color: #fff; background-color: #000;}.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}/* demo css */#dowebok { position: relative; width: 780px; height: 390px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; background: url(images/ly-plate-c.gif) 20px 20px no-repeat;}.plate { position: relative; float: left; width: 390px; height: 390px; background-image: url(images/lyplate.png);}.prize { float: right; width: 360px; height: 390px; font: 14px/1.5 "Microsoft Yahei";}.prize h4 { margin: 80px 0 20px; padding: 10px; background-color: #eee;}.prize ul { list-style-type: none;}.prize li { margin: 10px;}#plateBtn { position: absolute; left: 88px; top: 88px; width: 214px; height: 214px; background-image: url(images/rotate-static.png); text-indent: -9999px; overflow: hidden;}#result { display: none; position: absolute; left: 65px; top: 155px; width: 300px; height: 120px; background-color: rgba(0,0,0,0.75); filter: alpha(opacity=90);}#resultTxt { padding: 45px 15px 0; font: 16px "Microsoft Yahei"; color: #fff; text-align: center;}#resultTxt em { color: #ffea76; font-style: normal;}#resultBtn { position: absolute; right: 5px; top: 5px; width: 25px; height: 25px; text-indent: -100px; background-image: url(images/close.png); overflow: hidden;}</style></head><body><h1>jqueryrotate制作机锋网积分抽奖效果演示</h1><div id="dowebok"> <div class="plate"> <a id="plateBtn" href="javascript:" title="开始抽奖">开始抽奖</a> </div> <div class="prize"> <h4>奖品设置</h4> <ul> <li><strong>一等奖：</strong>iPhone 6 Plus（1名）</li> <li><strong>二等奖：</strong>iPhone 6（2名）</li> <li><strong>三等奖：</strong>iPad Air 2（5名）</li> <li><strong>参与奖：</strong>充电宝（20名）</li> </ul> </div> <div id="result"> <p id="resultTxt"></p> <a id="resultBtn" href="javascript:" title="关闭">关闭</a> </div></div><script src="js/jquery-1.8.3.min.js"></script><script src="js/jquery.rotate.min.js"></script><script>$(function(){ var $plateBtn = $('#plateBtn'); var $result = $('#result'); var $resultTxt = $('#resultTxt'); var $resultBtn = $('#resultBtn'); $plateBtn.click(function(){ var data = [0, 1, 2, 3, 4, 5, 6, 7，8, 9 , 10 ]; data = data[Math.floor(Math.random()*data.length)]; switch(data){ case 1: rotateFunc(1,18,'恭喜你中了 <em>2等奖</em>'); break; case 2: rotateFunc(2,54,'恭喜你中了 <em>3等奖</em>'); break; case 3: rotateFunc(3,90,'恭喜你中了 <em>2等奖</em>'); break; case 4: rotateFunc(4,126,'恭喜你中了 <em>3等奖</em>'); break; case 5: rotateFunc(5,162,'恭喜你中了 <em>1等奖</em>'); break; case 6: rotateFunc(6,198,'恭喜你中了 <em>3等奖</em>'); break; case 7: rotateFunc(7,234,'恭喜你中了 <em>2等奖</em>'); break; case 8: rotateFunc(8,270,'恭喜你中了 <em>3等奖</em>'); break; case 9: rotateFunc(9,306,'恭喜你中了 <em>1等奖</em>'); break; case 10: rotateFunc(10,342,'恭喜你中了 <em>3等奖</em>'); break; default: rotateFunc(0,203,'恭喜你中了 <em>参与奖</em>'); } }); var rotateFunc = function(awards,angle,text){ //awards:奖项，angle:奖项对应的角度 $plateBtn.stopRotate(); $plateBtn.rotate({ angle: 0, duration: 5000, animateTo: angle + 1440, //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈 callback: function(){ $resultTxt.html(text); $result.show(); } }); }; $resultBtn.click(function(){ $result.hide(); });});</script></body></html>
添加回答
举报
0/150
提交
取消