You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
5.4 KiB
152 lines
5.4 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>建党百年</title>
|
|
<meta name="keywords" content="keyword1,keyword2,keyword3">
|
|
<meta name="description" content="this is my page">
|
|
<meta name="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
|
|
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/comment.js" type="text/javascript" charset="utf-8"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/common.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/intoGame.css" />
|
|
</head>
|
|
<style type="text/css">
|
|
.btn {
|
|
animation: btnlive 0.5s linear;
|
|
}
|
|
|
|
@keyframes btnlive {
|
|
0% {
|
|
bottom: 0rem;
|
|
}
|
|
100% {
|
|
bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
animation: titlelive 0.5s linear 0.1s;
|
|
}
|
|
|
|
@keyframes titlelive {
|
|
0% {
|
|
bottom: 0rem;
|
|
}
|
|
100% {
|
|
bottom: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.btnscale {
|
|
transform: scale(0.9);
|
|
transition: all 0.6s;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
|
|
<source src="img/soundBgm.mp3" type="audio/mp3" />
|
|
<!--您的浏览器不支持 audio 标签。-->
|
|
</audio>
|
|
<div id="wrap">
|
|
<div class="masks"></div>
|
|
<div class="bgm"><img src="img/intoGame.png" /></div>
|
|
<div class="btn">
|
|
进入活动
|
|
|
|
</div>
|
|
<div class="ruleCont">
|
|
<p class="title">活动规则</p>
|
|
<div class="ruleText">
|
|
<ul>
|
|
<li>
|
|
1.活动时间<br /> 2021年XX月XX日至2021年XX月XX日。
|
|
<!-- <br /> 2.参加人员
|
|
<br /> 北京海淀上庄镇全体居民。 -->
|
|
<br /> 2.活动规则
|
|
<!--<br /> ①参与活动时候，系统自动获取个人微信头像，请按照弹窗提示填写信息;
|
|
<br /> ②本次闯关游戏共有五关，每一关的游戏规则请认真阅读当前关卡的提示信息。-->
|
|
|
|
<br />第一关，请将地图下方的场景图片移动至地图中虚框的位置；
|
|
<br />第二关，请根据上方的时间找到对应的战役，并进行连线；
|
|
<br />第三关，请通过翻转的方式将上方的人物和下方的姓名进行正确组合；
|
|
<br />第四关，请根据上方的时间选择正确的会议名称；
|
|
<br />第五关，请根据问题描述选择出正确答案。
|
|
<!-- <br /> 3.奖项设置
|
|
<br /> 在2021年XX月XX日24时前完成云长征路线的参与者，完成闯关任务的请参加后面的转盘抽奖，每个微信号只可进行一次抽奖，抽奖结果请截图保存至手机，按照抽奖结果页面提示信息进行奖品兑换。 奖品领取时间和地点，活动结束后将在活动结果页面上发布，敬请关注，有任何问题请致电活动客服人员。 -->
|
|
<br /> 3.参考资料
|
|
<br /> 本活动中长征点位弹窗内容以及答题闯关中的长征知识参考资料为《红军长征史》，《红军长征史》由中共党史出版社于2006年3月出版，由中共中央党史研究室第一研究部主编。 <!-- 本活动程序中长征路线根据1934年10月至1935年10月红一方面军（即中央红军)的长征行军路线而设定。 -->
|
|
<br /> 本活动素材均来源于百度百科，如涉版权问题请联系我方，我方将及时处理。
|
|
<br /> 4.版权说明
|
|
<br />参与活动前，请详细阅读活动规则及相关条款。最终解释权归本公司所有。
|
|
<br /> 5.客服电话：XXXXXXXXXXX
|
|
</li>
|
|
<p class="line"></p>
|
|
<p class="close">关闭</p>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="audioImg">
|
|
<img src="img/audioIcon.png" />
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
function audioAutoPlay(id) {
|
|
var audio = document.getElementById(id),
|
|
play = function () {
|
|
audio.play();
|
|
document.removeEventListener("touchstart", play, false);
|
|
};
|
|
audio.play();
|
|
document.addEventListener("WeixinJSBridgeReady", function () {
|
|
play();
|
|
}, false);
|
|
document.addEventListener('YixinJSBridgeReady', function () {
|
|
play();
|
|
}, false);
|
|
document.addEventListener("touchstart", play, false);
|
|
}
|
|
audioAutoPlay('bgmAudio');
|
|
|
|
var clickState = true;
|
|
|
|
$('.btn').click(function() {
|
|
if(clickState) {
|
|
// window.location.href = "game1.html?audioState=" + audioState
|
|
window.location.replace("game1.html?audioState=" + audioState)
|
|
// window.open
|
|
}
|
|
|
|
//console.log(audioState)
|
|
})
|
|
$(".btn").on("touchstart", function(e) {
|
|
// e.preventDefault(); //阻止其他事件
|
|
$(this).toggleClass("btnscale")
|
|
})
|
|
|
|
$('.close').on('touchstart', function(e) {
|
|
e.preventDefault(); //阻止其他事件
|
|
$('.ruleText').css('display', 'none');
|
|
$('.masks').css('display', 'none');
|
|
setTimeout(function() {
|
|
clickState = true
|
|
}, 1000)
|
|
})
|
|
|
|
$('.title').on('touchstart', function(e) {
|
|
$('.ruleText').css('display', 'block');
|
|
$('.masks').css('display', 'block');
|
|
})
|
|
})
|
|
</script>
|