载入jQuery
登录后复制
HTML
勇士榜
- 鲁大师 成功射中!
- 鲁大师 成功射中!
- 鲁大师 成功射中!
- 鲁大师 成功射中!
- 鲁大师 成功射中!
- 鲁大师 成功射中!
- 鲁大师 成功射中!
- 鲁大师 成功射中!
- 鲁大师 成功射中!
七夕♥爱神带你迎好礼
哇,神箭手哎,恭喜你!
再来一次 10秒 放箭 x10 258爱我吧 x0朵 520我爱你 x0朵 1314一生一世 x0朵 2514爱我一世 x0朵 3344生生世世 x0朵
登录后复制
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;}
登录后复制
var donghua; $(function(){ love(); donghua=setInterval(love,2000); }) function shoot(){ //射击数量减少 var num=$("#shootnum").html().match(/\d+/g); if(num90&&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","https://www.php.cn/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]; }
登录后复制
最后附上下载 演示