标签：style blog http io ar color os sp java
近期写的一个旋转抽奖的程序，贴出来让大家看看，那些的不好的，可以指出，相互交流。
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；
欢迎大家赐教，谢谢。
标签：style blog http io ar color os sp java
原文地址：http://www.cnblogs.com/ajieyingqulvxing/p/4119204.html
