载入jQuery
<script src=\"./jquery-1.11.0.min.js\" type=\"text/javascript\"></script>
HTML
<div class=\"rank\"> <div class=\"bangdan\">勇士榜</div> <ul> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> <li>鲁大师 成功射中!</li> </ul> </div> <div class=\"stage\"> <div class=\"title\"><h3>七夕♥爱神带你迎好礼</h3> </div> <div class=\"qiubite\"></div> <img src=\"./love.png\" id=\"love\"> <div class=\"prize\"> <div class=\"jiangpin\"> <h2 class=\"gongxi\">哇,神箭手哎,恭喜你!</h2> <img src=\"./qinlv.png\"> <img src=\"\" id=\"flower\"><br> <span id=\"flowername\"></span> </div> <a href=\"javascript:init();\" class=\"btn restart\">再来一次</a> </div> <div class=\"arrow\"></div> <a href=\"javascript:void(0)\" class=\"btn djs\">10秒</a> <a href=\"javascript:shoot();\" class=\"btn start\" > 放箭 <span id=\"shootnum\">x10</span></a> </div> <div class=\"tools\"> <div class=\"lipin\"><img src=\"./flower/1.gif\"> <span class=\"name\">258爱我吧</span> <span id=\"flower_1\">x0朵</span> </div> <div class=\"lipin\"><img src=\"./flower/2.gif\"> <span class=\"name\">520我爱你</span> <span id=\"flower_2\">x0朵</span> </div> <div class=\"lipin\"><img src=\"./flower/3.gif\"> <span class=\"name\">1314一生一世</span> <span id=\"flower_3\">x0朵</span> </div> <div class=\"lipin\"><img src=\"./flower/4.gif\"> <span class=\"name\">2514爱我一世</span> <span id=\"flower_4\">x0朵</span> </div> <div class=\"lipin\"><img src=\"./flower/5.gif\"> <span class=\"name\">3344生生世世</span> <span id=\"flower_5\">x0朵</span> </div>
CSS
<style type=\"text/css\"> body{font-family:\"微软雅黑\"} .qiubite{background:url(./qiubite.png) no-repeat; width:150px; height:150px; position:absolute; left:10px; top:120px; } #love{ position:absolute; top:120px; right:10px; width:120px; height:120px; } .stage{ background:url(./bg.jpg) no-repeat; width:800px;height:500px;position:relative;margin:0 auto;border:1px solid #ccc;} .start{ } .btn{ position:absolute;left:350px; background:url(./bow.png) no-repeat; background-color: #f0ad4e; border-color: #eea236; height:34px; top:400px; display:block; border-radius:4px; text-decoration:none; line-height:40px; color: #fff; width:100px; text-indent:2em; } .restart{display:none;} .start:hover{ background-color:#eea236; } .arrow{background:url(./arrow.png) no-repeat;width:100px;height:50px; position:absolute;top:120px;left:160px; display:none; } .prize{ text-align: center; display:none; position:absolute; left:0px; top:0px; width:800px; height:500px; background:rgba(0, 0, 0, 0.6); z-index:2; } .jiangpin{ width:580px; height:180px; color:#fff; font-size:12px; margin:100px auto; } .restart{display:none;}; #love{display:block;} .title{text-align:center;color:#fff;font-size:30px;} .tools{margin:0 auto; width:800px; height:160px; top:500px; left:250px; } .tools .lipin{float:left;width:160px;text-align: center;position:relative;} .tools .lipin span{display:block;} .tools .lipin .name{ position: absolute; top: 120px; width: 160px; background: rgba(255, 255, 255, 0.81); text-align: center; font-size: 12px;} .djs{display:none;background:#666;} .rank{ width: 300px; float: left; border:3px solid #973a29; } .rank ul{list-style:none;padding:0;} .rank ul li{background:url(./bow.png) no-repeat; text-indent: 3em; font-size: 15px; line-height: 30px; border-bottom: 1px dashed #ccc} .rank .bangdan{background:#973a29;color:#e1c148;font-size:18px;font-weight:700;text-align:center;} </style>
javascript
var donghua; $(function(){ love(); donghua=setInterval(love,2000); }) function shoot(){ //射击数量减少 var num=$(\"#shootnum\").html().match(/\\d+/g); if(num<=0){ alert(\"你只有0只箭了\"); return false; } var shootnum=parseInt(num)-1; $(\"#shootnum\").html(\"x\"+shootnum); $(\".arrow\").show(); $(\".start\").hide(); var speed=getShootSpeed(); var arrowtop=$(\".qiubite\").offset().top+20; arrowtop=parseInt(arrowtop); $(\".arrow\").css({\"top\":arrowtop}); $(\".arrow\").animate({\"left\":\"600\"}, speed,function(){ if(arrowtop>90&&arrowtop<270){ flower(); }else{ alert(\"射飞了!\"); clearInterval(donghua); $(\"#love\").stop(); $(\".qiubite\").stop(); init(); } }) } //物体动画效果 function love(){ $(\"#love\").animate({width:\"100\",height:\"100\"},1000,function(){ $(\"#love\").animate({width:\"120\",height:\"120\"},1000,function(){ }) }) $(\".qiubite\").animate({top:\"20\"},1000,function(){ $(\".qiubite\").animate({top:\"300\"},1000,function(){ }) }) } //初始化 var zhunbei; function init(){ $(\".arrow\").css({left:160}); $(\".arrow\").hide(); $(\"#fower\").hide(); $(\".restart\").hide(); $(\".djs\").show(); zhunbei=setInterval(djs,200); $(\".prize\").hide(); love(); donghua=setInterval(love,2000); } //箭的速度 function getShootSpeed(){ return Math.floor(Math.random()*1500)+500; } //鲜花显示 中奖 function flower(){ var flowerid=Math.floor(Math.random()*4)+1; $(\"#flower\").attr(\"src\",\"./flower/\"+flowerid+\".gif\"); clearInterval(donghua); $(\"#love\").stop(); $(\".qiubite\").stop(); setTimeout(function(){ $(\"#love\").attr(\"src\",\"./love.png\"); $(\"#love\").hide(); $(\".arrow\").hide(); },1000); //增加暴击效果 $(\"#love\").attr(\"src\",\"./sj.png\"); $(\"#love\").fadeOut(); setTimeout(function(){ $(\".restart\").show(); $(\".prize\").show(); $(\".gongxi\").html(getGongxi(flowerid)); $(\"#flowername\").html(\"恭喜你获得了《\"+getFlowerName(flowerid) +\"》\"); var num=$(\"#flower_\"+flowerid).html(); var total=parseInt(num.match(/\\d+/g))+1; $(\"#flower_\"+flowerid).html(\"x\"+total+\"朵\"); },800) } //倒计时显示开始 var lasttime=10; function djs(){ var now=lasttime--; $(\".djs\").html(now+\"秒\"); if(lasttime<0){ lasttime=10; $(\".djs\").hide(); $(\".start\").show(); $(\".djs\").html(\"10秒\"); clearInterval(zhunbei); } } function getFlowerName(id){ var fname=new Array(); fname[1]=\"爱我吧\"; fname[2]=\"我爱你\"; fname[3]=\"一生一世\"; fname[4]=\"爱我一世\"; fname[5]=\"生生世世\"; return fname[id]; } function getGongxi(id){ var fname=new Array(); fname[1]=\"哎呦,看好你!\"; fname[2]=\"太棒了\"; fname[3]=\"哇,堪比职业选手\"; fname[4]=\"亲,你是我的偶像呦!\"; fname[5]=\"哇!你是神箭手哎!\"; return fname[id]; }
最后附上下载 演示
本文地址:https://www.stayed.cn/item/7065
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我