应一网友的要求,做了一个类似机锋网积分抽奖的效果。其实这个效果和之前的“百度红包大放送抽奖效果”是一样的,使用了 jQuery 旋转插件——jquery.rotate.js,只是转盘不一样罢了。
制作方法
1、引入文件
<script src="https://www.dowebok.com/js/jquery-1.8.3.min.js"></script> <script src="https://www.dowebok.com/js/jquery.rotate.min.js"></script>
2、HTML
<div id="dowebok"> <div class="plate"> <a id="plateBtn" href="https://www.dowebok.com/javascript:" rel="external nofollow" rel="external nofollow" 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="https://www.dowebok.com/javascript:" rel="external nofollow" rel="external nofollow" title="关闭">关闭</a> </div> </div>
3、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; }
4、JavaScript
$(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]; data = data[Math.floor(Math.random()*data.length)]; switch(data){ case 1: rotateFunc(1,157,'恭喜你中了 <em>一等奖</em>'); break; case 2: rotateFunc(2,65,'恭喜你中了 <em>二等奖</em>'); break; case 3: rotateFunc(3,335,'恭喜你中了 <em>三等奖</em>'); break; case 4: rotateFunc(4,247,'恭喜你中了 <em>四等奖</em>'); break; case 5: rotateFunc(5,114,'谢谢参与,请再接再厉'); break; case 6: rotateFunc(6,24,'谢谢参与,请再接再厉'); break; case 7: rotateFunc(7,292,'谢谢参与,请再接再厉'); 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(); }); });
[b2_file link="
百度网盘" name="jqueryrotate制作机锋网积分抽奖效果" pass="" code=""]