<!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">
<!--help pop-up content start-->
<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>
<!--help pop-up content end-->
<!--prize pop-up content start-->
<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>
<!--prize pop-up content end-->
<!--succeed pop-up content start-->
<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>
<!--succeed pop-up content end-->
<!--share pop-up content start-->
<div class="overlay" id="pop-share"> <img src="images/430-290.png" class="share-pic"> </div>
<!--share pop-up content end-->
<!--top-nav content start-->
<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>
<!--top-nav content end-->
<!--shake main content start-->
<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>
<!--shake main content end-->
<!--footer content start
<div class="footer"> Copyright 2014 By Digital Force Inc. 沪ICP<br/>All Rights Reserved.<br/>Digital Force 版权所有 </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>
没有合适的资源?快使用搜索试试~ 我知道了~
【kk梦空间】wap仿微信手机摇一摇抽奖活动页面模板.zip
共19个文件
png:10个
jpg:3个
mp3:1个
0 下载量 28 浏览量
2024-04-16
01:39:18
上传
评论
收藏 544KB ZIP 举报
温馨提示
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
【kk梦空间】wap仿微信手机摇一摇抽奖活动页面模板.zip (19个子文件)
js
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
共 19 条
- 1
资源评论
小肥羊k
- 粉丝: 2005
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功