kk梦空间wap仿微信手机摇一摇抽奖活动页面模板.zip资源-CSDN文库

共19个文件

png：10个

jpg：3个

mp3：1个

微信

88 浏览量 2024-04-08 12:05:54 上传评论收藏 543KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

【kk梦空间】wap仿微信手机摇一摇抽奖活动页面模板.zip （19个子文件）

jquery.js 94KB

css

style.css 4KB

index.html 7KB

images

180-160.png 52KB

service.png 3KB

m-shake.png 26KB

Thumbs.db 40KB

pop-text.png 29KB

btn.jpg 3KB

phone.png 27KB

help.png 2KB

car.jpg 29KB

close.png 1KB

shake-no.jpg 53KB

pop-bg.png 5KB

voice.mp3 22KB

430-290.png 12KB

pop-sorry.png 14KB

shake-yes.gif 224KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-touch-fullscreen" content="yes"> <meta content="target-densitydpi=device-dpi,width=640,user-scalable=no" name="viewport"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>摇一摇</title> </head> <body> <div class="main"> <div class="content-box">  <div class="overlay" id="overlay-help"> <div class="pop-up rule-box"> <a href="#" class="rule-close"></a> <h2>活动规则</h2> <p>1.摇晃手机参与抽奖。</p> <p>2.每个用户有3次抽奖机会。</p> <h2>奖项设置</h2> <p>一等奖:电脑（1台）</p> <p>二等奖：手机（3部）</p> <p>三等奖：鼠标（10个）</p> <br /> <br /> <a href="#" class="btn">我知道了</a> </div> </div>   <div class="overlay" id="overlay-prize"> <div class="prize-box"> <div class="content"><a href="#" class="rule-close" style="top:-38px;"></a> <p>人品大爆发，摇到了</p> <p>iPhone5s一部，是不是好开</p> <p>心呀，怒赞一个！</p> <div class="intro clear"> <img src="images/phone.png"> <div> <h3>二等奖：手机</h3> <span>领奖方式：在下方填写您的信</span><span>息，工作人员会尽快联系您的。</span></div> </div> <div class="info"> <h3>请输入个人信息：</h3> <ul> <li> <label>姓名</label> <input type="text"> </li> <li> <label>手机</label> <input type="text"> </li> <li> <label>地址</label> <input type="text"> </li> </ul> <div class="btn-box"><a href="#" class="btn" id="submit-btn">     提交     </a> </div> </div> </div> </div> </div>   <div class="overlay" id="pop-succeed"> <div class="pop-up rule-box"><a href="#" class="rule-close"></a> <h2>成功提交！</h2> <p>李艾</p> <p>15212593503</p> <p>上海市浦东新区川杨新苑</p> <br /> <br /> <p>赶快点击分享跟小伙伴们炫耀一下吧。</p> <br /> <br /> <br /> <a href="#" class="btn again" style="margin-right:20px;">再玩一次</a><a href="#" class="btn share">   分享   </a> </div> </div>   <div class="overlay" id="pop-share"> <img src="images/430-290.png" class="share-pic"> </div>   <div class="clear top-nav"><a href="#" class="lf helf"><img src="images/help.png"></a><a href="#" class="lr service"><img src="images/service.png"><span class="prize"></span></a></div>   <div class="shake-box"> <div class="shake-no"><img src="images/shake-yes.gif"></div> <div class="shake-yes"><img src="images/shake-yes.gif"></div> <div class="btn-dynamic"><a href="#">今天还能摇3次</a></div> </div> </div>   </div> <button onClick="playVid()" type="button" style="width:300px; height:200px; margin-bottom:30px;">播放视频</button> <audio src="images/voice.mp3" controls preload="metadata" id="video1" style="display:none; visibility:hidden; width:0px; height:0px; background:none;"></audio> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //overlay $(".helf").on("click",function(){ $("#overlay-help").show(); }); $(".rule-close,.btn").on("click",function(){ $("#overlay-help,#overlay-prize,#pop-succeed").hide(); }); $(".service").on("click",function(){ $("#overlay-prize").show(); }); $("#submit-btn").on("click",function(){ $("#overlay-prize").hide(); $("#pop-succeed").show(); }); $(".again").on("click",function(){ $("#pop-succeed").hide(); }); $(".share").on("click",function(){ $("#pop-succeed").hide(); $("#pop-share").show(); }); $("#pop-share").on("click",function(){ $(this).hide(); }); }()); if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } var SHAKE_THRESHOLD = 300; var last_update = 0; var x, y, z, last_x, last_y, last_z; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; //alert(newDate().getTime()); var curTime = new Date().getTime(); // alert(curTime - last_update); if ((curTime - last_update)> 300) { var diffTime = curTime -last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { //$(".play").click(); $("#overlay-prize").show(); // 摇一摇执行播放那个函数 playVid(); //var myVideo=document.getElementById("video1"); // myVideo.play(); } last_x = x; last_y = y; last_z = z; } } function playVid() { $(document).on('touchstart', function() { myVideo.load() }) var myVideo = document.getElementById("video1"); myVideo.play(); } </script> </body> </html>

评论收藏

内容反馈