首页 > 代码库 > 旋转抽奖效果
旋转抽奖效果
近期写的一个旋转抽奖的程序，贴出来让大家看看，那些的不好的，可以指出，相互交流。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="content-type" content="text/html" charset="GB2312"/> 5 <title>抽奖</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;list-style: none;} 8 .box{width: 900px;height: 600px;border: 1px solid #000;} 9 .box li{width: 300px;height: 200px;float: left; position: relative;}10 .btn{width: 300px;height: 200px;font-size: 48px;text-align: center;line-height: 200px;cursor: pointer;}11 .grayLayer{width: 300px;height: 200px;background: #000;opacity: .5;filter: alpha(opacity = 50); position: absolute;top:0;left: 0;}12 .getIt .grayLayer{opacity: 0;filter: alpha(opacity = 0);}13 </style> 14 </head>15 <body>16 <ul class="box">17 <li class="pic">18 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />19 <div class="grayLayer"></div>20 </li>21 <li class="pic">22 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />23 <div class="grayLayer"></div>24 </li>25 <li class="pic">26 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />27 <div class="grayLayer"></div>28 </li>29 <li class="pic">30 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />31 <div class="grayLayer"></div>32 </li>33 <li>34 <div class="btn">点击抽奖</div>35 </li>36 <li class="pic">37 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />38 <div class="grayLayer"></div>39 </li>40 <li class="pic">41 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />42 <div class="grayLayer"></div>43 </li>44 <li class="pic">45 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />46 <div class="grayLayer"></div>47 </li>48 <li class="pic">49 <img src="http://d.hiphotos.baidu.com/image/h%3D360/sign=42c72eb65166d0166119982ea72bd498/8601a18b87d6277fe5339f432b381f30e924fcac.jpg" width="300" height="200" alt="" />50 <div class="grayLayer"></div>51 </li>52 </ul>53 <script src="http://static.xgo-img.com.cn/js/jquery172p.js" type="text/javascript"></script>54 <script type="text/javascript">55 var count = [0,1,2,4,7,6,5,3];//图片旋转顺序56 var speedNum = 500; //初始速度57 var baseNum = 0;58 var oBtn = $(".btn");59 var oCartoonBox = $("li.pic");60 var timer = null;61 var countNum = 0; /*动画进行步数*/62 var stopNum = Math.floor(Math.random()*8);/*控制动画停在第几帧 6是第七张*/63 oBtn.click(function () {64 donghua();//点击启动动画65 })66 function donghua () {67 if(timer){clearTimeout(timer)};//清除排队现象68 speedNum -=50;69 countNum ++;70 if (speedNum<50) {71 speedNum = 50;72 }73 if (baseNum>7) {74 baseNum = 0;75 }76 oCartoonBox.eq(count[baseNum]).addClass("getIt").siblings().removeClass("getIt");77 baseNum ++; 78 79 if (countNum>(33+stopNum)) {/*33表示动画转了4圈之后开始减速，33 = 4 * 8 + 1*/80 81 speedNum +=100;82 console.log(speedNum);83 if (speedNum>=500) {84 oCartoonBox.eq(count[stopNum]).addClass("getIt").siblings().removeClass("getIt");85 clearTimeout(timer);86 return;87 }88 }89 timer = setTimeout(donghua,speedNum); 90 }91 </script>92 </body>93 </html>
大概说一下思路：
1. 通过数组，人为的设定动画旋转的顺序；
2. 动画就是所有参与旋转的元素轮流添加类和移除类，类是控制添加li上面浮层隐藏和显示的class名；
3. 动画停止是先生成一个随机数，这个数就是控制动画停在哪一帧上，因为这个代码一共8帧，因此提前8帧开始减速；当旋转到此帧的时候return；
欢迎大家赐教，谢谢。
旋转抽奖效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。