index.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable"/>
  6. <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  7. <meta name="format-detection" content="telephone=no"/>
  8. <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
  9. <title>祈福</title>
  10. <style type="text/css">
  11. body{color:#505050;font-size:30px; font-family:"Microsoft YaHei"; line-height:1.5; background:url(img/bg01.jpg) no-repeat; background-size:100% auto;}
  12. html,body,h1,h2,h3,p,div,ul,li{margin:0;padding:0;}
  13. ul,li{list-style:none;}
  14. html,body,img{border:0;}
  15. em{font-style:normal;}
  16. h1,h2,h3,strong,em{ font-style:normal; font-weight:normal;}
  17. a,a:hover{text-decoration:none; display:inline-block; outline:none;blr:expression(this.onFocus=this.blur());}
  18. .clearfix:after{clear:both; content:'.'; display:block; visibility:hidden; height:0}
  19. .container{width:100%;}
  20. .msg{ margin:0 10px 0 20px; padding-top:40%;}
  21. .p-put{ width:50%; height:25px; display:inline-block; float:left;}
  22. .p-put label{ color:#FFF; font-size:1.1rem; float:left;}
  23. .p-put span{ width:60%; height:23px; font-size:1.1rem; border-bottom:solid 2px #FFF; float:left;}
  24. .p-put span input{ width:100%; height:23px; line-height:23px; font-size:1.1rem; border:none; color:#FFF; background:none; outline:none; float:left;}
  25. .info{ width:100%; padding-top:30px; text-indent:32px; line-height:1.5; font-size:1.1rem; color:#FFF;}
  26. .margin_big{ margin-top:60%;}
  27. .margin_small{ margin-top:30%;}
  28. .btn{ margin-left:20%; margin-right:20%;}
  29. .btn a{ width:100%; display:block; height:40px; line-height:40px; text-align:center; color:#873600; font-size:1.1rem; background:#FFF; border-radius:3px;}
  30. .sharemcover {
  31. position: fixed;
  32. top: 0;
  33. left: 0;
  34. width: 100%;
  35. height: 100%;
  36. background: rgba(0, 0, 0, 0.7);
  37. display: none;
  38. z-index: 20000;
  39. }
  40. .sharemcover img {
  41. position: fixed;
  42. right: 18px;
  43. top: 5px;
  44. width: 260px;
  45. height: 180px;
  46. z-index: 20001;
  47. border:0;
  48. }
  49. .sharemcover p {
  50. color:#fff;
  51. left:0px;
  52. top:50%;
  53. font-size: 15px;
  54. position: fixed;
  55. text-align: center;
  56. z-index: 20002;
  57. border:0;
  58. }
  59. .aa{ width:100%; position:fixed; top:0; left:0; height:72px; z-index:2;}
  60. .aa .bb{ width:100%; max-width:640px; margin:0 auto; height:100%; font-size:50%; position:relative;}
  61. .aa .bb .lt{ width:20%; max-width:72px; height:100%; position:absolute; top:0; left:2%; text-align:left;}
  62. .aa .bb .lt img{ width:100%; max-width:72px; vertical-align:middle;}
  63. .aa .bb .ct{ padding:0 32% 0 22%; height:100%; color:#FFF; text-align:center;font-size: 10px;}
  64. .aa .bb .rt{ width:30%; height:100%; max-width:160px; position:absolute; top:0; right:2%; text-align:right;}
  65. .aa .bb .rt .btn{ width:100%; display:inline-block; padding:6% 0; color:#FFF; text-decoration:none; text-align:center; border-radius:5px; background:#399B39; font-size:15px;}
  66. </style>
  67. </head>
  68. <body>
  69. <div id="sharemcover0" class="sharemcover" onClick="document.getElementById('sharemcover0').style.display = '';">
  70. <img src="./img/guidetofollow.png" style="width:70px;heigth:50px;">
  71. <p>您是第5445994位,为灾区同胞祈福的人。点击分享,发出祈福。</p></div>
  72. <!--编辑区域 start-->
  73. <div class="msg" id="stepOne">
  74. <div class="container clearfix">
  75. <div class="p-put">
  76. <label>我是</label>
  77. <span><input type="text" id="my_name"/></span>
  78. </div>
  79. <div class="p-put">
  80. <label>我来自</label>
  81. <span><input type="text" id="my_address"/></span>
  82. </div>
  83. </div>
  84. <div class="info" id="infoID">为云南鲁甸县祈福,为灾区的所有同胞祈福!</div>
  85. </div>
  86. <div class="btn margintop-big" id="btnID">
  87. <a href="javascript:;">为灾区祈福</a>
  88. </div>
  89. <!--编辑区域 end-->
  90. <script type="text/javascript" src="js/jquery.js"></script>
  91. <script type="text/javascript">
  92. var num='5445994';
  93. var name='';
  94. var address='';
  95. $(window).ready(function() {
  96. if($(window).height()>=420)
  97. {
  98. $("#btnID").addClass("margin_big").removeClass("margin_small");
  99. }
  100. else
  101. {
  102. $("#btnID").addClass("margin_small").removeClass("margin_big");
  103. }
  104. // $('.p-put input').blur(function(){
  105. // })
  106. $('#btnID a').click(function(){
  107. name=$('#my_name').val();
  108. address=$('#my_address').val();
  109. $('#sharemcover0').show();
  110. })
  111. });
  112. HOME_PATH="http://game.ikongzhong.cn/";
  113. mebtnopenurl=HOME_PATH;
  114. window.shareData = {
  115. "imgUrl": "./img/share.jpg",
  116. "timeLineLink": "http://game.ikongzhong.cn/games/qifu/msg.php?name="+name+'&address='+address+'&num='+num,
  117. "tTitle":"" ,
  118. "tContent": "为云南鲁甸县祈福,为灾区的所有同胞祈福!"
  119. };
  120. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  121. WeixinJSBridge.on('menu:share:appmessage', function(argv) {
  122. WeixinJSBridge.invoke('sendAppMessage', {
  123. "img_url": window.shareData.imgUrl,
  124. "link": ' http://game.ikongzhong.cn/games/qifu/msg.php?mame='+name+'&address='+address+'&num='+num,
  125. "desc": window.shareData.tContent,
  126. "title": window.shareData.tTitle
  127. }, function(res) {
  128. document.location.href = mebtnopenurl;
  129. })
  130. });
  131. WeixinJSBridge.on('menu:share:timeline', function(argv) {
  132. WeixinJSBridge.invoke('shareTimeline', {
  133. "img_url": window.shareData.imgUrl,
  134. "img_width": "640",
  135. "img_height": "640",
  136. "link": ' http://game.ikongzhong.cn/games/qifu/msg.php?name='+name+'&address='+address+'&num='+num,
  137. "desc": window.shareData.tContent,
  138. "title": "我叫"+name+",我来自"+address+',我是第'+num+'位为灾区祈福的人'
  139. }, function(res) {
  140. document.location.href = mebtnopenurl;
  141. });
  142. });
  143. }, false);
  144. </script>
  145. <img src="http://c.cnzz.com/wapstat.php?siteid=1252958148&r=http%3A%2F%2Fwww.qoobex.com%2Fwap_hly%2Fqifu%2Fmsg.php%3Fname%3D&rnd=1056998219" width="0" height="0"/></body>
  146. </html>