index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>千万别来南宁</title>
  6. <meta name="apple-touch-fullscreen" content="yes" />
  7. <meta name="format-detection" content="telephone=no" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10. <meta http-equiv="Expires" content="-1" />
  11. <meta http-equiv="pragram" content="no-cache" />
  12. <!--移动端版本兼容 -->
  13. <script type="text/javascript">
  14. var phoneWidth = parseInt(window.screen.width);
  15. var phoneScale = phoneWidth/640;
  16. var ua = navigator.userAgent;
  17. if (/Android (\d+\.\d+)/.test(ua)){
  18. var version = parseFloat(RegExp.$1);
  19. // andriod 2.3
  20. if(version>2.3){
  21. document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
  22. // andriod 2.3以上
  23. }else{
  24. document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
  25. }
  26. // 其他系统
  27. } else {
  28. document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
  29. }
  30. </script>
  31. <!--移动端版本兼容 end -->
  32. <link rel="stylesheet" href="success/css/success.css?v=20140621" />
  33. </head>
  34. <body>
  35. <div class="p-index">
  36. <div class="audio_txt">
  37. <p class="txt">点击开启/关闭音效</p>
  38. <p></p>
  39. </div>
  40. <section class="fn-audio">
  41. <div class="btn">
  42. <p class="btn_audio"><span class="css_sprite01 audio_open"></span><span class="css_sprite01 audio_close"></span></p>
  43. <audio id="car_audio" controls="" preload="preload">
  44. <source src="success/images/bgmusic.mp3" type="audio/mpeg">
  45. </audio>
  46. </div>
  47. </section>
  48. <section class="u-arrow"><img src="success/images/btn01_arrow.png" width="28"></section>
  49. <!-- 旋转正面 data-open: 0->关闭, 1->开启 -->
  50. <!-- 旋转正面 end-->
  51. <input id="ca-tips" type="hidden" value="" />
  52. <!-- 蒙板背景图 -->
  53. <input id="r-cover" type="hidden" value='success/images/s1.jpg' />
  54. <div class='m-page m-page1 v-page' data-id='16265' data-statics='info_pic2'>
  55. <div id="j-mengban" class='translate-front z-show'>
  56. <div class='mengban-warn'></div>
  57. </div>
  58. <div class="page-con lazy-img" data-src='success/images/s2.jpg'><img src="success/images/s2.jpg" class="imgHeight" width="100%" hidden /></div>
  59. </div>
  60. <!-- 封页 end-->
  61. <!--
  62. <section data-page="1" class="m-page m-page1" data-id='16266' data-type='info_pic2'>
  63. <div class="m-img m-img01" style="background:url(/success/images/s1.jpg) center top no-repeat; background-size:cover;"></div>
  64. <img data-share-logo="" src="success/images/s1.jpg" style="display:none;">
  65. </section>
  66. <section data-page="2" class="m-page m-page2 hide" data-id='16268' data-type='info_nomore'>
  67. <div class="m-img m-img01" data-bk='success/images/s2.jpg'
  68. style="background:url(/success/images/s2.jpg) center top no-repeat; background-size:cover;">
  69. </div>
  70. </section>
  71. -->
  72. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16269' data-type='info_nomore'>
  73. <div class="m-img m-img01" data-bk='success/images/s3.jpg'
  74. style="background:url(./success/images/s3.jpg) center top no-repeat; background-size:cover;">
  75. <img src="success/images/s3_txt.png" width="100%" class="showTxt txt-s3" />
  76. </div>
  77. </section>
  78. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16270' data-type='info_nomore'>
  79. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s4.jpg'
  80. style="background:#ddd center top no-repeat; background-size:cover;">
  81. <img src="success/images/s4_txt.png" width="100%" class="showTxt txt-s4" />
  82. </div>
  83. </section>
  84. <section data-page="2" class="m-page m-page2 h-page hide" data-id='16271' data-type='info_nomore'>
  85. <div class="m-img m-img01 lazy-bk" id="tleft" data-bk='success/images/s12.jpg'
  86. style="background:#ddd center top no-repeat; background-size:cover;">
  87. <img src="success/images/s5_txt.png" width="100%" class="txt-s5" />
  88. <p class="tr mb30"><img src="success/images/s5_1_1.png" height="200" class="s5-img1-1" /><img src="success/images/s5_1_1.png" height="200" class="s5-img1-2" /><img src="success/images/s5_1.png" height="200" class="s5left" /></p>
  89. <p class="tl"><img src="success/images/s5_2.png" height="200" class="s5right" /><img src="success/images/s5_2_1.png" height="200" class="s5-img2-1" /><img src="success/images/s5_2_1.png" height="200" class="s5-img2-2" /></p>
  90. </div>
  91. </section>
  92. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16272' data-type='info_nomore'>
  93. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s6.jpg'
  94. style="background:#ddd center top no-repeat; background-size:cover;">
  95. </div>
  96. </section>
  97. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16273' data-type='info_nomore'>
  98. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s7.jpg'
  99. style="background:#ddd center top no-repeat; background-size:cover;">
  100. <img src="success/images/s7_txt.png" width="100%" class="showTxt txt-s7" />
  101. </div>
  102. </section>
  103. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16274' data-type='info_nomore'>
  104. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s8.jpg'
  105. style="background:#ddd center top no-repeat; background-size:cover;">
  106. <img src="success/images/s8_txt.png" width="100%" class="showTxt txt-s8" />
  107. </div>
  108. </section>
  109. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16275' data-type='info_nomore'>
  110. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s9.jpg'
  111. style="background:#ddd center top no-repeat; background-size:cover;">
  112. <img src="success/images/s9_txt.png" width="100%" class="showTxt txt-s9" />
  113. </div>
  114. </section>
  115. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16276' data-type='info_nomore'>
  116. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s10.jpg'
  117. style="background:#ddd center top no-repeat; background-size:cover;">
  118. <img src="success/images/s10_txt.png" width="100%" class="showTxt txt-s10" />
  119. </div>
  120. </section>
  121. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16277' data-type='info_nomore'>
  122. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s11.jpg'
  123. style="background:#ddd center top no-repeat; background-size:cover;">
  124. <!-- <p class="btnWrap"><a href="#"><img src="success/images/btn_yy.png" width="60%" /></a></p> -->
  125. </div>
  126. </section>
  127. <!-- 12 S -->
  128. <section data-page="2" class="m-page m-page2 v-page hide" data-id='16278' data-type='info_nomore'>
  129. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s12.jpg'
  130. style="background:#ddd center top no-repeat; background-size:cover;">
  131. <p class="f0"><img src="success/images/t12.png" width="100%" /></p>
  132. <div class="cont12">
  133. <ul class="list-pro">
  134. <li class="chosed" pv="1"><img src="success/images/p1.png" width="100%" /><img src="success/images/icon_chose.png" width="30" class="icon-chose" /></li>
  135. <li class="chosed" pv="2"><img src="success/images/p2.png" width="100%" /><img src="success/images/icon_chose.png" width="30" class="icon-chose" /></li>
  136. <li class="chosed" pv="3"><img src="success/images/p3.png" width="100%" /><img src="success/images/icon_chose.png" width="30" class="icon-chose" /></li>
  137. </ul>
  138. <ul class="list-form12">
  139. <li><p class="f0 ptb10"><img src="success/images/txt12_1.png" width="80%" /></p></li>
  140. <li><a href="#" class="db btn-sub"><img id="postinfo_btn" src="success/images/btn_sub.png" width="100%" /></a></li>
  141. <li><p class="f0 pt10"><img src="success/images/txt12_2.png" width="70%" /></p></li>
  142. </ul>
  143. </div>
  144. </div>
  145. </section>
  146. <!-- 12 E -->
  147. <section id="s13" data-page="2" class="m-page m-page2 v-page hide" data-id='16279' data-type='info_nomore'>
  148. <div class="m-img m-img01 lazy-bk" data-bk='success/images/s13.jpg'
  149. style="background:#ddd center top no-repeat; background-size:cover;">
  150. <img src="success/images/s13_txt.png" width="100%" class="showTxt txt-s13" />
  151. <p class="tc s13txt">
  152. <img src="success/images/s13_icon2.png" height="36" class="s13icon1" />
  153. <img src="success/images/s13_icon2.png" height="36" class="s13icon2" />
  154. <img src="success/images/s13_icon2.png" height="36" class="s13icon3" />
  155. <img src="success/images/s13_txt2.png" height="36" class="mlr10" />
  156. <img src="success/images/s13_icon.png" height="36" class="s13icon4" />
  157. <img src="success/images/s13_icon.png" height="36" class="s13icon5" />
  158. <img src="success/images/s13_icon.png" height="36" class="s13icon6" />
  159. </p>
  160. <p class="tc copyWrap"><span class="mr10">南宁周边游微信</span> 荣誉出品</p>
  161. </div>
  162. </section>
  163. </div>
  164. <div id="systemmsg_box" class="share-popup" style="display:none !important;">
  165. <div class="alert-div">
  166. <p class="tc" id="systemmsg_text">您的手机号码输入错误!</p>
  167. <p class="tc" id="systemmsg_btn"><img src="success/images/btn_sure.png" width="60%" /></p>
  168. </div>
  169. </div>
  170. <script type="text/javascript" src="success/js/jquery.min.js?v=20140621"></script>
  171. <script type="text/javascript" src="success/js/easing.min.js?v=20140621"></script>
  172. <script type="text/javascript" src="success/js/main.min.js?v=20140621"></script>
  173. <script type="text/javascript" src="success/js/lottery.min.js?v=20140621"></script>
  174. <script type="text/javascript" src="success/js/com.js?v=20140621"></script>
  175. <script>
  176. var mebtnopenurl = 'mkongzhong';
  177. dataForWeixin = {
  178. appid: 'wx13b7a88076a07cba',
  179. img_url: './success/images/zazhi.png',
  180. img_width: '100',
  181. img_height: '100',
  182. link: 'http://game.ikongzhong.cn/games/zazhi/index.html',
  183. title: '我是认真的,千万不要来南宁',
  184. desc: "我是认真的,千万不要来南宁",
  185. callback:function(){document.location.href = mebtnopenurl;}
  186. };
  187. $('#postinfo_btn').bind('click', function(){
  188. if(!$('#name').val()){
  189. systemmsg('你确定还要来南宁?!');
  190. return;
  191. }
  192. if( !isMobile($('#mobile').val()) ){
  193. systemmsg('请填写正确的手机号!');
  194. return;
  195. }
  196. var params = {
  197. pid : $('.chosed').attr('pv'),
  198. name : $('#name').val(),
  199. mobile : $('#mobile').val()
  200. };
  201. $.ajax({
  202. type : 'POST',
  203. url : 'http://game.ikongzhong.cn/',
  204. data : params,
  205. dataType : 'json',
  206. success : function(response) {
  207. if(response.ret==1){
  208. $('#name').val('');
  209. $('#mobile').val('');
  210. systemmsg("您的信息提交成功!", function(){
  211. $(".btn-sub").closest(".m-page").next('.m-page').css('top',$(window).height()).addClass("active").animate({"top":0}, 1000);
  212. newM = page_n + 1 ;
  213. page_n = newM;
  214. });
  215. }else{
  216. systemmsg(response.msg);
  217. }
  218. }
  219. });
  220. });
  221. $('.list-pro').find('li').bind('click', function(){
  222. $(this).addClass('chosed').siblings().removeClass('chosed');
  223. });
  224. window.onload = function(){
  225. changeClose();
  226. var lottery = new Lottery($('#j-mengban')[0], $('#r-cover').val(), 'image',$('.imgHeight').width() , $(window).height(), function(){
  227. $('#j-mengban').fadeOut(200);
  228. changeOpen();
  229. $("#car_audio")[0].play();
  230. });
  231. lottery.init();
  232. setTimeout(function(){$('.imgHeight').show();}, 500);
  233. }
  234. if(window.screen.height <= 480){
  235. $('[data-bk="success/images/s6.jpg"]').css('background-position', '0 -30px');
  236. $('[src="success/images/txt12_2.png"]').hide();
  237. }
  238. </script>
  239. <div style='display:none;' data-role="none" hidden>
  240. </div></body>
  241. </html>