|
|
<!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年6月25日至2021年7月4日，前200名参与者2021年7月5日至2021年7月7日到镇党委宣传部领取纪念品一份。 <!-- <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.客服电话：010-62475045 </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>
|
