抽奖首页代码

大 | 中 | 小
[不指定 2015/07/30 16:39 | by 刘新修 ]

 

XML/HTML代码
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <link rel="dns-prefetch" href="//hd.youyuan.com">  
  6. <link rel="dns-prefetch" href="//x.youyuan.com">  
  7. <link rel="dns-prefetch" href="//f1.youyuan.com">  
  8. <link rel="dns-prefetch" href="//f2.youyuan.com">  
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  10. <meta content="yes" name="apple-mobile-web-app-capable" />  
  11. <meta content="black" name="apple-mobile-web-app-status-bar-style" />  
  12. <meta content="telephone=no" name="format-detection" />  
  13. <title>抽奖结果</title>  
  14. <link href="css/love-qixi.css" rel="stylesheet" type="text/css" />  
  15. <style>  
  16. .ele{ background:url(images/selected.png); display:none}  
  17. .lotteryBox{ width:96%; margin:0 auto;}  
  18. .lotteryBox .lottery{ width:290px; height:290px; margin:0 auto; background:url(images/lottery.png) no-repeat; background-size:100%; position:relative; z-index:101;}  
  19. .lotteryBox .lottery .prize_{ width:25%; height:25%; position:absolute; z-index:102;}  
  20. .lotteryBox .lottery .prize_1{ left:0; top:0;}  
  21. .lotteryBox .lottery .prize_2{ left:25%; top:0;}  
  22. .lotteryBox .lottery .prize_3{ left:50%; top:0;}  
  23. .lotteryBox .lottery .prize_4{ left:75%; top:0;}  
  24. .lotteryBox .lottery .prize_5{ left:75%; top:25%;}  
  25. .lotteryBox .lottery .prize_6{ left:75%; top:50%;}  
  26. .lotteryBox .lottery .prize_7{ left:75%; top:75%;}  
  27. .lotteryBox .lottery .prize_8{ left:50%; top:75%;}  
  28. .lotteryBox .lottery .prize_9{ left:25%; top:75%;}  
  29. .lotteryBox .lottery .prize_10{ left:0%; top:75%;}  
  30. .lotteryBox .lottery .prize_11{ left:0%; top:50%;}  
  31. .lotteryBox .lottery .prize_12{ left:0%; top:25%;}  
  32. .lotteryBox .lottery .selected{ background-image:url(images/selected.png); background-repeat: no-repeat; background-size:90%;}  
  33. .lotteryBox .lottery .prize_1.selected{ background-position: 20% 30%;}  
  34. .lotteryBox .lottery .prize_2.selected{ background-position: 36% 30%;}  
  35. .lotteryBox .lottery .prize_3.selected{ background-position: 40% 30%;}  
  36. .lotteryBox .lottery .prize_4.selected{ background-position: 60% 30%;}  
  37. .lotteryBox .lottery .prize_5.selected{ background-position: 60% 35%;}  
  38. .lotteryBox .lottery .prize_6.selected{ background-position: 60% 35%;}  
  39. .lotteryBox .lottery .prize_7.selected{ background-position: 60% 50%;}  
  40. .lotteryBox .lottery .prize_8.selected{ background-position: 60% 50%;}  
  41. .lotteryBox .lottery .prize_9.selected{ background-position: 36% 50%;}  
  42. .lotteryBox .lottery .prize_10.selected{ background-position: 20% 50%;}  
  43. .lotteryBox .lottery .prize_11.selected{ background-position: 20% 35%;}  
  44. .lotteryBox .lottery .prize_12.selected{ background-position: 20% 35%;}  
  45.   
  46. </style>  
  47. </head>  
  48. <body>  
  49. <div class="top_blank"></div>  
  50. <nav class="nav">  
  51.     <h2 class="pink">抽奖结果</h2>  
  52.     <div class="left" onClick="history.go(-1)"> <i class="le_trg"></i></div>  
  53.     <div class="right"><!-- <span id="search_sure" class="seach_sure">确定</span>--> </div>  
  54. </nav>  
  55. <div class="ele"></div>  
  56. <div class="blank10"></div>  
  57. <div class="lotteryBox">  
  58. <div class="lottery">  
  59. <div class="prize_ prize_1"></div>  
  60. <div class="prize_ prize_2"></div>  
  61. <div class="prize_ prize_3"></div>  
  62. <div class="prize_ prize_4"></div>  
  63. <div class="prize_ prize_5"></div>  
  64. <div class="prize_ prize_6"></div>  
  65. <div class="prize_ prize_7"></div>  
  66. <div class="prize_ prize_8"></div>  
  67. <div class="prize_ prize_9"></div>  
  68. <div class="prize_ prize_10"></div>  
  69. <div class="prize_ prize_11"></div>  
  70. <div class="prize_ prize_12"></div>  
  71. </div>  
  72. <div class="blank10"></div>  
  73. <div class="upload-btn send-out start_" usable="false">开始抽奖</div>  
  74. </div><!-- lotteryBox -->  
  75. </body>  
  76. <script type="text/javascript" src="//f1.youyuan.com/xfile/www/js/??public/lib/zepto/zepto-1.1.6.js,public/m/ajax-min.js"></script>  
  77. <script type="text/javascript" src="js/all.js"></script>  
  78. <script type="text/javascript">  
  79. var lottery={  
  80.     beginning:-1,   //从哪个位置【起点】  
  81.     prizeNum:-1,    //到哪个位置【终点】  
  82.     countNum:0,     //循环DOM总共有多少个  
  83.     bufferNum:60,   //转动基本次数：至少转动60次之后才可以停顿  
  84.     timer:0,        //setTimeout的ID，用clearTimeout清除  
  85.     speed:20,       //循环DOM转动的速度  
  86.     times:0,        //向前走过的个数每次+1  
  87.     shared:0,  
  88.     cNum:0,  
  89.     beginFun:function(){  
  90.         lottery.times+=1;  
  91.         var NTT=lottery.times;  
  92.         var datanum=lottery.times;  
  93.         var dataccc=Math.ceil(datanum/2)-1;  
  94.         if(datanum%2==0){  
  95.             $(".game_").addClass("game_on");  
  96.         }  
  97.         else if(datanum%2!=0){  
  98.             $(".game_").removeClass("game_on");  
  99.         }  
  100.         lottery.rollFun();  
  101.         if (lottery.times>lottery.bufferNum&&lottery.prizeNum==lottery.beginning){  
  102.               
  103.             if(lottery.prizeNum==0){  
  104.                 //alert("恭喜您，中了第5个奖品")  
  105.                   
  106.             }else if(lottery.prizeNum==1){  
  107.                 //alert("恭喜您，中了第5个奖品")  
  108.                   
  109.             }else if(lottery.prizeNum==2){  
  110.                 //alert("恭喜您，中了第5个奖品")  
  111.       
  112.             }else if(lottery.prizeNum==3){  
  113.                 //alert("恭喜您，中了第5个奖品")  
  114.                   
  115.             }else if(lottery.prizeNum==4){  
  116.                 //alert("恭喜您，中了第5个奖品")  
  117.                   
  118.             }else if(lottery.prizeNum==5){  
  119.                 //alert("恭喜您，中了第5个奖品")  
  120.                   
  121.             }else if(lottery.prizeNum==5&&lottery.shared==0&&lottery.cNum==0){  
  122.                 //alert("恭喜您，中了第5个奖品")  
  123.                   
  124.             }else if(lottery.prizeNum==6){  
  125.                 //alert("恭喜您，中了第5个奖品")  
  126.   
  127.             }else if(lottery.prizeNum==7){  
  128.                 //alert("恭喜您，中了第5个奖品")  
  129.             }  
  130.       
  131.             clearTimeout(lottery.timer);  
  132.             lottery.prizeNum=-1;  
  133.             lottery.times=0;  
  134.             click=false;  
  135.         }else{  
  136.             if (lottery.times<lottery.bufferNum) {  
  137.                 lottery.speed-=10;  
  138.             }else if(lottery.times==lottery.bufferNum) {  
  139.                 //var beginning = Math.random()*(lottery.countNum)|0;  
  140.                 //lottery.prizeNum = 3;      
  141.             }else{  
  142.                 if (lottery.times>lottery.bufferNum&&((lottery.prizeNum==0&&lottery.beginning==7)||lottery.prizeNum==lottery.beginning+1)){  
  143.                     lottery.speed+=110;  
  144.                 }else{  
  145.                     lottery.speed+=20;  
  146.                 }  
  147.             }  
  148.             if (lottery.speed<40) {  
  149.                 lottery.speed=40;  
  150.             };  
  151.             //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prizeNum);  
  152.             lottery.timer=setTimeout(lottery.beginFun,lottery.speed);  
  153.         }  
  154.         return false;  
  155.     },  
  156.     initFun:function(className){  
  157.         //该模块主要是选择器，最后给起点加上CSS样式  
  158.         if ($("."+className).find(".prize_").length>0){  
  159.             $objD=$("."+className);  
  160.             $childNode=$objD.find(".prize_");  
  161.             this.obj=$objD;  
  162.             this.countNum=$childNode.length;  
  163.             $objD.find(".prize_"+this.index).addClass("selected");  
  164.         };  
  165.     },  
  166.     rollFun:function(){  
  167.         //该模块主要是步进值循环移除及添加，到终点后设置Index值为0  
  168.         var index=this.beginning;  
  169.         var count=this.countNum;  
  170.         var objD=this.obj;  
  171.         $(objD).find(".prize_"+index).removeClass("selected");  
  172.         index+=1;  
  173.         if (index>count){  
  174.             index=0;  
  175.         };  
  176.         $(objD).find(".prize_"+index).addClass("selected");  
  177.         this.beginning=index;  
  178.         return false;  
  179.     },  
  180.     stopFun:function(index){  
  181.         this.prizeNum=index;  
  182.         return false;  
  183.     }  
  184. };  
  185.   
  186. //获取整体的宽度并设置子节点宽度  
  187. var _lotteryBoxWidth=$(".lotteryBox").width();  
  188. $(".lottery").css({"width":_lotteryBoxWidth,"height":_lotteryBoxWidth});  
  189.   
  190.   
  191. //点击抽奖按钮调用公共方法  
  192. $(".start_").click(function(){  
  193. lottery.initFun('lottery');  
  194. lottery.prizeNum=5;  
  195. lottery.speed=100;  
  196. lottery.cNum=1;  
  197.   
  198. //开始抽奖执行方法  
  199. lottery.beginFun();  
  200.   
  201. });  
  202.   
  203.   
  204.   
  205. </script>  
  206. </html>  

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3825)