홈 탐색 도움말
가입하기 로그인
root
/
tv_xiaoyouxi
Watch 1
Star 0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
트리: d1c3c48a01
브랜치 태그
tv_xiaoyouxi
/
games
/
shier
/
index.html

index.html 21 KB
히스토리 Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422 
  1. <!DOCTYPE HTML><head>
    2. 

  2. <meta charset="utf-8">
    3. 

  3. <meta name="author" content="Tencent-TGideas">
    4. 

  4. <meta name="format-detection" content="telephone=no" />
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    6. 

  6. <meta name="apple-mobile-web-app-capable" content="yes" />
    7. 

  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    8. 

  8. <div id='wx_pic' style='margin:0 auto;display:none;'>
    9. 

  9. <img src='games/juanzhidai/images/pic300.jpg' />
    10. 

  10. </div>
    11. 

  11. <title>双十二再次剁手来袭，看你有多拽！</title>
    12. 

  12. <!-- 设计：yafeezhou| 重构：brucewan | 创建：2014/05/08 | 更新：| 团队博客：http://tgideas.qq.com/ -->
    13. 

  13. <script>
    14. 

  14. 	var _speedMark = new Date();
    15. 

  15. </script>
    16. 

  16. <style>
    17. 

  17. /* global */
    18. 

  18. html,body,ul,h1,h2,h3,p,input,img,figure{margin: 0;padding: 0;}
    19. 

  19. ul,ol{list-style: none;}
    20. 

  20. html{overflow: hidden;}
    21. 

  21. body{width: 100%;height: 100%;overflow: hidden;-webkit-user-select: none;}
    22. 

  22. body{font:12px/21px  Arial,\5FAE\8F6F\96C5\9ED1;color: #fff;}
    23. 

  23. @font-face {font-family: 'icon';src: url('./res/hero.woff') format('woff'), url('./res/hero.ttf')  format('truetype');}
    24. 

  24.  [class^="icon-"]:before, [class*=" icon-"]:before {display: inline-block; width: 1em;margin-right: .2em;font-family: "icon";font-style: normal;font-weight: normal;text-align: center;speak: none;line-height: 1em; margin-left: .2em;}
    25. 

  25. .icon-more:before { content: '\e800'; } 
    26. 

  26. .icon-share:before { content: '\e801'; } 
    27. 

  27. .icon-play:before { content: '\e802'; }
    28. 

  28. a{color: #33234f;text-decoration: none;}
    29. 

  29. a:active{-webkit-tap-highlight-color: rgba(0,0,0,0);}
    30. 

  30. 

  31. @-webkit-keyframes jump {
    32. 

  32. 	0% { -webkit-transform: translate(0, 0);}
    33. 

  33. 	100% { -webkit-transform: translate(0, 100px);}
    34. 

  34. }
    35. 

  35. @-webkit-keyframes wave {
    36. 

  36. 	0% { -webkit-transform: scale(1, 1);opacity: 0.5;}
    37. 

  37. 	100% { -webkit-transform: scale(2, 2);opacity: 0;}
    38. 

  38. }
    39. 

  39. 

  40. 

  41. /* layout */
    42. 

  42. .screen-slide{position: absolute;height: 300%;width: 100%;}
    43. 

  43. .screen-slide .s{height: 33.4%;position: relative;overflow: hidden;}
    44. 

  44. .screen-slide .content{position: absolute;left: 50%;top: 50%;width: 360px;height: 575px;margin-left: -180px;margin-top: -288px;background: #ff0;}
    45. 

  45. 

  46. 

  47. .s1 .content{background: url(./images/bg-s1.jpg);-webkit-background-size: 100% 100%;background-size: 100% 100%;}
    48. 

  48. .s1 .progress{position: absolute;right: 100px;top: 243px;width: 130px;font-size: 24px;text-align: center;}
    49. 

  49. .s1 .progress .num{margin-right: 5px;font-size: 42px}
    50. 

  50. 

  51. 

  52. .s2{background-color: #000000;}
    53. 

  53. .s2 .content{background: url(./images/bg-s2.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
    54. 

  54. .s2 .paper-box{-webkit-transform:skew(0,-8deg);transform:skew(0,-8deg);position: absolute;top: 232px;left: 118px;width: 176px;height: 400px;background:  url(./images/bg-paper.png) repeat-y;-webkit-background-size: 176px 143px;background-size: 176px 143px;}
    55. 

  55. .s2 .tips{position: absolute;top: 90px;left: 0;width: 360px;height: 400px;text-align: center;line-height: 1}
    56. 

  56. .s2 .tips p{margin: 8px 0;}
    57. 

  57. .s2 .tips .f1{font-size: 14px;}
    58. 

  58. .s2 .tips .f2{font-size: 30px;font-weight: bold;color: #6b4c24}
    59. 

  59. .s2 .tips .f3{font-size: 17px;line-height: 18px;color: #4ca8f7}
    60. 

  60. .s2 .tips .f4{font-size: 40px;color: #6b4c24;}
    61. 

  61. .s2 .tips .f5{font-size: 17px;color: #4ca8f7}
    62. 

  62. .s2 .tips .f6{font-size: 28px;color: #4ca8f7}
    63. 

  63. .s2 .tips .f7{font-size: 24px;color: #4ca8f7}
    64. 

  64. .s2 .guide{position: absolute;top: 260px;left: 140px;z-index: 1;width: 130px;height: 200px;color: #000;font-weight: bold;font-size: 16px;text-align: center;pointer-events: none;-webkit-transition:.5s opacity;}
    65. 

  65. .s2 .guide .hand{width: 75px;height: 65px;margin: 10px 0 0 28px;background: url('./images/icon-hand.png') no-repeat;-webkit-background-size: 75px 65px;background-size: 75px 65px;-webkit-animation: jump 2s infinite;}
    66. 

  66. .s2 .guide .f8{font-size: 12px;font-weight: normal;}
    67. 

  67. .s2 .guide.hide{opacity: 0}
    68. 

  68. .s2 .logo{position: absolute;left:10px;top: 10px;z-index: 2;opacity: .2;}
    69. 

  69. 

  70. .s3{background-color: #000000;}
    71. 

  71. .s3 .content{background: url(./images/bg-s3.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
    72. 

  72. .s3 .tips{width: 200px;height:200px;margin-left: 80px;padding-top: 45px;text-align: center;}
    73. 

  73. .s3 .tips .f1{font-size: 14px;}
    74. 

  74. .s3 .tips .f2{position: absolute;top: 180px;left: 116px;font-size: 14px;color: #c3020b}
    75. 

  75. .s3 .tips .f3{margin-top: 10px;font-size: 20px;color: #c3020b}
    76. 

  76. .s3 .tips .f3 .num{margin: 0 5px;font-size: 28px;}
    77. 

  77. 

  78. .s3 .tips .f4{font-size: 12px;color: #b5c8d8}
    79. 

  79. .s3 .logo{position: absolute;left:10px;top: 10px;z-index: 2;opacity: .2;}
    80. 

  80. 

  81. .s3 .fuc{margin-top: 15px;text-align: center;}
    82. 

  82. .s3 .fuc .btn-wrap{display: inline-block;position: relative;}
    83. 

  83. .s3 .fuc .btn-wrap .bg{position: absolute;left: 10px ;top: 0;width: 60px;height: 60px;border-radius: 30px;background: #e6f6ff;-webkit-animation: wave 2s infinite;}
    84. 

  84. .s3 .fuc .btn-wrap .about{position: absolute;left: -22px;width: 120px;top: 70px;border-radius: 3px; background-color: rgba(255,255,255,0.2);color: #fff}
    85. 

  85. .s3 .fuc .btn{position: absolute;left: 0;top: 0;z-index: 2;display: inline-block;width: 60px;height: 60px;border-radius: 30px;margin: 0 10px;background-color: #76a6c8;position: relative;-webkit-box-shadow:0 3px rgba(0,0,0,.4);box-shadow:0 3px rgba(0,0,0,.4);}
    86. 

  86. .s3 .fuc .btn span{position: absolute;width: 60px;height: 60px;top: -3px;left: 0;border-radius: 30px;background-color: #e6f6ff;color: #5d90ab;font-size: 12px;line-height: 18px;}
    87. 

  87. .s3 .fuc .btn span::before{display: inline-block;width: 100%;margin: 12px 0 0 0;font-size: 20px}
    88. 

  88. .s3 .fuc .btn-em{background-color: #c9950c;}
    89. 

  89. .s3 .fuc .btn-em span{background-color: #f3c856;color: #ab6c21}
    90. 

  90. 

  91. .share-guide{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8) url(./images/icon-arrow.png?33) no-repeat 90% 20px;-webkit-background-size: 40px 80px;background-size: 40px 80px;color: #fff;}
    92. 

  92. .share-guide p{padding: 100px 30px 30px;text-align: right;font-size: 20px;line-height: 30px;}
    93. 

  93. .share-guide .em{color: #ff734d;}
    94. 

  94. 

  95. </style>
    96. 

  96. <script>
    97. 

  97. 	document.documentElement.style.height = window.innerHeight + 'px';
    98. 

  98. </script>
    99. 

  99. </head>
    100. 

  100. 

  101. <body>
    102. 

  102. 

  103. 	<div id='wx_pic' style='margin:0 auto;display:none;'>
    104. 

  104. 		<img src='http://game.ikongzhong.cn/game/shier/images/pic300.jpg' />
    105. 

  105. 	</div>
    106. 

  106. 	<div class="screen-slide">
    107. 

  107. 		<div class="s s1">
    108. 

  108. 			<div class="content">
    109. 

  109. 				<div class="progress"><span class="num">0</span>%</div>
    110. 

  110. 			</div>
    111. 

  111. 		</div>
    112. 

  112. 		<div class="s s2">
    113. 

  113. 

  114. 			<div class="content">
    115. 

  115. 				<div class="tips">
    116. 

  116. 					<div class="ready">
    117. 

  117. 						<p class="f1">　</p>
    118. 

  118. 						<p class="f2">“看你有多拽”</p>
    119. 

  119. 						<p class="f3">10秒内看看你能拽出多长的优惠券</p>
    120. 

  120. 					</div>
    121. 

  121. 					<div class="run" style="display:none">
    122. 

  122. 						<p class="f4">“00:10:00”</p>
    123. 

  123. 						<p class="f5">被拽出 <span class="f6"><span class="dis">0</span> <span class="f7">m</span></span></p>		
    124. 

  124. 					</div>
    125. 

  125. 				</div>
    126. 

  126. 				<div class="guide">
    127. 

  127. 					<p><span class="f8">提示</span><br/>手指下向滑动<br/>开始游戏</p>
    128. 

  128. 					<div class="hand"></div>
    129. 

  129. 				</div>
    130. 

  130. 				<div class="paper-box"></div>
    131. 

  131. 			</div>
    132. 

  132. 		</div>
    133. 

  133. 		<div class="s s3">
    134. 

  134. 			
    135. 

  135. 			<div class="content">
    136. 

  136. 				<div class="tips">
    137. 

  137. 					<p class="f1"></p>
    138. 

  138. 					<p class="f2"><span class="f3"><span class="num">7</span></span></p>
    139. 

  139. 					<p class="img"><img src="./" alt=""></p>
    140. 

  140. 					<p class="f4">“”</p>
    141. 

  141. 				</div>
    142. 

  142. 				<div class="fuc">
    143. 

  143. 					<div class="btn"><span class="icon-more">再拽</span></div>
    144. 

  144. 					<div class="btn"><span class="icon-share">分享</span></div>
    145. 

  145. 					<div class="btn-wrap">
    146. 

  146. 						</p>
    147. 

  147. 					</div>
    148. 

  148. 				</div>
    149. 

  149. 			</div>
    150. 

  150. 		</div>
    151. 

  151. 

  152. 	</div>
    153. 

  153. 

  154. 	<div class="share-guide" style="display:none;">
    155. 

  155. 		<p>点击上面按钮<br/>将游戏 <span class="em">分享到朋友圈,叫上好友一起拽！</span></p>
    156. 

  156. 	</div>
    157. 

  157. 

  158. 	<script>
    159. 

  159. 		(function(e){if(e)return;var t=["webkit","moz","o"],e={extend:function(e,t,n,r){n===undefined&&(n=!0);for(var i in t)if(n||!(i in e))r?r(i):e[i]=t[i];return e},support:{translate3d:function(){var e="translate3d(0px, 0px, 0px)",t=document.createElement("div");t.style.cssText=" -moz-transform:"+e+"; -ms-transform:"+e+"; -o-transform:"+e+"; -webkit-transform:"+e+"; transform:"+e;var n=/translate3d\(0px, 0px, 0px\)/g,r=t.style.cssText.match(n),i=r!==null&&r.length==1;return i}()},css:function(e,n,r){var i=/transform/i;if(i.test(n))for(var s=0;s<t.length;s++)e.style[t[s]+n.substr(0,1).toUpperCase()+n.substr(1)]=r;e.style[n]=r}};window.m=e})(window.m),m.Tab=function(e){this.config=m.extend(m.extend({},m.Tab.config),e,!0),this.init()},m.Tab.config={touchMove:!1,animTime:500,touchDis:40,direction:"x",touchSpeed:1,currentClass:"current",progressBar:!1},m.Tab.prototype={init:function(){var e=this,t=e.config;e._data={},e.target=t.target,e.length=e.target.length,e.trigger=t.trigger,e.num=e.target.length,e.wrap=e.target[0].parentNode,m.support.translate3d&&(e.wrap.style.webkitTransition="-webkit-transform "+t.animTime+"ms ease-out"),m.css(e.wrap,"transform","translate(0,0)"),e.width=e.wrap.parentNode.clientWidth;if(t.progressBar===!0){var n=document.createElement("ul");n.classList.add("progress-bar");for(var r=0;r<e.length;r++){var i=document.createElement("li");n.appendChild(i)}e.progressBar=e.wrap.parentNode.appendChild(n).childNodes}e._attach(),e.playTo(0)},_attach:function(){var e=this,t=e.config;window.addEventListener("resize",e.update.bind(e));if(e.trigger){var n=e.trigger.length;for(var r=0;r<n;r++)(function(t){e.trigger[t].addEventListener("touchend",function(n){e.playTo(t)})})(r)}var i=e._data,s=!1,o,u,a;t.touchMove&&e.wrap.addEventListener("touchstart",function(n){if(t.ontouchstart&&t.ontouchstart.apply(e,[n])===!1)return!1;i.pageX=n.touches[0].pageX,i.pageY=n.touches[0].pageY,e.wrap.style.webkitTransitionDuration="0ms",e.wrap.addEventListener("touchmove",u),e.wrap.addEventListener("touchend",a),o=""}),u=function(n){i.disX=n.touches[0].pageX-i.pageX,i.disY=n.touches[0].pageY-i.pageY,t.direction=="x"?i.dis=i.disX:i.dis=i.disY,o||(Math.abs(i.disX/i.disY)>1?o="x":o="y");if(t.ontouchmove&&t.ontouchmove.apply(e,[i.dis,n])===!1)return!1;t.direction==o&&(t.direction=="x"?m.css(e.wrap,"transform","translate3d("+(i.dis-e.target[e.current].offsetLeft)+"px,0,0)"):m.css(e.wrap,"transform","translate3d(0,"+(i.dis-e.target[e.current].offsetTop)+"px,0)"))},a=function(){if(o&&t.direction!=o)return;if(i.dis===undefined||isNaN(i.dis))i.dis=0;e.wrap.style.webkitTransitionDuration=t.animTime+"ms",e.wrap.removeEventListener("touchmove",u),e.wrap.removeEventListener("touchend",a);var n=!0;t.ontouchend&&t.ontouchend.apply(e,[i.dis])===!1&&(n=!1);if(!i.dis||Math.abs(i.dis)<t.touchDis||!n){e.playTo(e.current);return}i.dis>0?e.playTo(e.current-t.touchSpeed):e.playTo(e.current+t.touchSpeed),i.dis=0},e.wrap.addEventListener("click",function(n){t.onclick&&t.onclick.call(e,n)})},playTo:function(e){var t=this,n=t.config;t.wrap.style.webkitTransitionDuration=n.animTime+"ms";if(n.onchangebefore&&n.onchangebefore.apply(t,[e])===!1)return;e>=t.num-1&&(e=t.num-1),e<0&&(e=0),m.support.translate3d?n.direction=="x"?m.css(t.wrap,"transform","translate3d("+ -t.target[e].offsetLeft+"px,0,0)"):m.css(t.wrap,"transform","translate3d(0,"+ -t.target[e].offsetTop+"px,0)"):n.direction=="x"?m.css(t.wrap,"transform","translate("+ -t.target[e].offsetLeft*e+"px,0)"):m.css(t.wrap,"transform","translate(0,"+ -t.target[e].offsetTop*e+"px)");if(e===t.current)return;t.trigger&&t.trigger[t.current]&&t.trigger[t.current].classList.remove(n.currentClass),t.progressBar&&t.progressBar[t.current]&&t.progressBar[t.current].classList.remove(n.currentClass),t.prevPage=t.current,t.current=e,t.trigger&&t.trigger[t.current]&&t.trigger[t.current].classList.add(n.currentClass),t.progressBar&&t.progressBar[t.current]&&t.progressBar[t.current].classList.add(n.currentClass),n.onchangebefore&&n.onchangebefore.apply(t,[e]),n.lazyClass&&t.lazy(e),window.setTimeout(function(){n.onchange&&n.onchange.apply(t,[e])},n.animTime)},prev:function(){this.playTo(this.current-1)},next:function(){this.playTo(this.current+1)},update:function(e){var t=this;t.width=t.wrap.parentNode.clientWidth},lazy:function(e){var t=[];targetWrap=this.target[e],targetWrap.classList.contains(this.config.lazyClass)&&t.push(targetWrap);var n=Array.prototype.slice.call(targetWrap.querySelectorAll("."+this.config.lazyClass),0);t=t.concat(n);for(var r=0;r<t.length;r++){var i=t[r],s=i.getAttribute("data-url");s&&(/img/i.test(i.tagName)?i.src=s:i.style.backgroundImage="url("+s+")",i.removeAttribute("data-url"))}}},m.Pop=function(e){this.config=m.extend(e,m.Pop.config),this.init()},m.Pop.config={animTime:300},m.Pop.prototype={init:function(){var e=this,t=e.config;e.target=t.target,e.target.style.webkitPerspective="1000px",e.target.style.webkitBackfaceVisibility="hidden",e.context=t.target.querySelector(".pop-content"),e.context.style.webkitTransition="-webkit-transform "+t.animTime+"ms ease-out",e.context.style.webkitTransformOrigin="50% 0",e.hide()},show:function(){var e=this,t=e.config;e.target.style.display="block",window.setTimeout(function(){e.context.style.webkitTransform="translate3d(0,0,0) rotateX(0)"},0)},hide:function(){var e=this,t=e.config;e.context.style.webkitTransform="translate3d(0,-50%,0) rotateX(-90deg)",window.setTimeout(function(){e.target.style.display="none"},t.animTime)}}
    160. 

  160. 	</script>
    161. 

  161. 

  162. 

  163. 

  164. 	<script>
    165. 

  165. 

  166. 		// name space
    167. 

  167. 		window.page = {};
    168. 

  168. 

  169. 		// reset page scroll top
    170. 

  170. 		// document.documentElement.scrollTop =  0;
    171. 

  171. 		window.scrollTo(0, 0);
    172. 

  172. 

  173. 

  174. 

  175. 

  176. 

  177. 		document.addEventListener('DOMContentLoaded', function(){
    178. 

  178. 

  179. 			// screen slide
    180. 

  180. 			page.screenSlide = new m.Tab({
    181. 

  181. 				target: document.querySelectorAll('.screen-slide .s'),
    182. 

  182. 				onchangebefore: function(n){
    183. 

  183. 

  184. 				},
    185. 

  185. 				touchMove: false,
    186. 

  186. 				direction: 'y'
    187. 

  187. 			});	
    188. 

  188. 

  189. 			// loading
    190. 

  190. 			var domProgress = document.querySelector('.progress .num');
    191. 

  191. 			var TIME = 3000;
    192. 

  192. 			var intervals = [];
    193. 

  193. 			var per = 0;
    194. 

  194. 			for(var i = 0; i < 100; i++) {
    195. 

  195. 				intervals.push( parseInt(Math.random() * TIME) );
    196. 

  196. 

  197. 			}
    198. 

  198. 			intervals = intervals.sort(function(a,b){return a - b});
    199. 

  199. 

  200. 			for(var i = 0; i < intervals.length; i++) {
    201. 

  201. 				window.setTimeout(function(){
    202. 

  202. 					per++;
    203. 

  203. 					domProgress.innerHTML = per;
    204. 

  204. 					// m.css(domProgress.parentNode, 'transform', 'translate(0,'+ Math.random()*1  +'px' + ')');
    205. 

  205. 				}, intervals[i]);
    206. 

  206. 			}
    207. 

  207. 

  208. 			window.setTimeout(function(){
    209. 

  209. 				page.screenSlide.playTo(1);
    210. 

  210. 			}, TIME + 300);
    211. 

  211. 

  212. 

  213. 

  214. 			// game
    215. 

  215. 			var bgPosY = 0;
    216. 

  216. 			score = 0;
    217. 

  217. 			var gameTime = 10000;
    218. 

  218. 			var d = {};
    219. 

  219. 			var domPaper = document.querySelector('.paper-box');
    220. 

  220. 			var domS2 = document.querySelector('.s2');
    221. 

  221. 			var domTimer = document.querySelector('.s2 .tips .f4');
    222. 

  222. 			var domDis = document.querySelector('.s2 .tips .dis');
    223. 

  223. 			var domResultText1 = document.querySelector('.s3 .f1');
    224. 

  224. 			var domResultText2 = document.querySelector('.s3 .f4');
    225. 

  225. 			var domResultScore = document.querySelector('.s3 .num');
    226. 

  226. 			var domResultRole = document.querySelector('.s3 .img img');
    227. 

  227. 			var resultTexts1 = ['，<br/> ', '<br/>', '<br/>', '<br/>', '<br/>'];
    228. 

  228. 			var resultTexts2 = ['', '', '', '', ''];
    229. 

  229. 			var hasBegun = false;
    230. 

  230. 			var hasEnd = false;
    231. 

  231. 			domS2.addEventListener('touchstart', function(e){
    232. 

  232. 				if(hasEnd) return;
    233. 

  233. 				d.startY = e.touches[0].pageY;
    234. 

  234. 				domS2.addEventListener('touchmove', touchMove);
    235. 

  235. 				domS2.addEventListener('touchend', touchEnd);
    236. 

  236. 

  237. 				if(!hasBegun) {
    238. 

  238. 					document.querySelector('.ready').style.display = 'none';
    239. 

  239. 					document.querySelector('.run').style.display = 'block';
    240. 

  240. 					document.querySelector('.guide').className = 'guide hide';
    241. 

  241. 					timerStart();
    242. 

  242. 					hasBegun = true;
    243. 

  243. 				}
    244. 

  244. 			});
    245. 

  245. 			touchMove = function(e){
    246. 

  246. 

  247. 				d.disY = e.touches[0].pageY - d.startY;
    248. 

  248. 				d.startY = e.touches[0].pageY;
    249. 

  249. 

  250. 				if(Math.abs(d.dis / d.disY) > 0.5) {
    251. 

  251. 					e.stopPropagation();
    252. 

  252. 					e.preventDefault();
    253. 

  253. 				}
    254. 

  254. 				if(d.disY < 0) return;
    255. 

  255. 

  256. 

  257. 

  258. 				// domPaper.style.webkitTransform = 'translate3d(' + (d.dis - self.current * self.width) + 'px,0,0)';
    259. 

  259. 				// console.log(d.disY)
    260. 

  260. 				bgPosY += d.disY;
    261. 

  261. 				score += parseInt(d.disY/20);
    262. 

  262. 				// console.log(bgPosY)
    263. 

  263. 

  264. 				 domPaper.style.backgroundPositionY = bgPosY + 'px';
    265. 

  265. 				 domDis.innerHTML = score;
    266. 

  266. 				
    267. 

  267. 			}
    268. 

  268. 			touchEnd = function() {
    269. 

  269. 

  270. 				domS2.removeEventListener('touchmove', touchMove);
    271. 

  271. 				domS2.removeEventListener('touchend', touchEnd);
    272. 

  272. 

  273. 

  274. 

  275. 				d.disY = 0;
    276. 

  276. 

  277. 			};
    278. 

  278. 

  279. 			timerStart = function(){
    280. 

  280. 				if(gameTime < 0) {
    281. 

  281. 					hasEnd = true;
    282. 

  282. 

  283. 					level = parseInt(score/250);
    284. 

  284. 					level = level > 4 ? 4 : level;
    285. 

  285. 

  286. 					domResultScore.innerHTML = score;
    287. 

  287. 					domResultText1.innerHTML = resultTexts1[level];
    288. 

  288. 					domResultText2.innerHTML = resultTexts2[level];
    289. 

  289. 					domResultRole.src = './images/pic'+ (level + 1 )+'.jpg'
    290. 

  290. 

  291. 					window.setTimeout(function(){
    292. 

  292. 						page.screenSlide.playTo(2);
    293. 

  293. 					}, 300);
    294. 

  294. 					return;
    295. 

  295. 				}
    296. 

  296. 				var sec = ('00' + parseInt(gameTime/1000)).substr(-2, 2);
    297. 

  297. 				var ms = (gameTime - sec*1000 + '00').substr(0, 2);
    298. 

  298. 				domTimer.innerHTML = '“00:'+ sec +':'+ ms +'”';
    299. 

  299. 				gameTime -= 20;
    300. 

  300. 				window.setTimeout(timerStart, 20);
    301. 

  301. 			}
    302. 

  302. 

  303. 

  304. 

  305. 			window.restart = function(){
    306. 

  306. 				bgPosY = 0;
    307. 

  307. 				score = 0;
    308. 

  308. 				gameTime = 10000;
    309. 

  309. 				d = {};
    310. 

  310. 				domPaper = document.querySelector('.paper-box');
    311. 

  311. 				domTimer = document.querySelector('.s2 .tips .f4');
    312. 

  312. 				domDis = document.querySelector('.s2 .tips .dis');
    313. 

  313. 				hasBegun = false;
    314. 

  314. 				hasEnd = false;
    315. 

  315. 				domDis.innerHTML = '0';
    316. 

  316. 				page.screenSlide.playTo(1);
    317. 

  317. 			}
    318. 

  318. 

  319. 

  320. 			document.querySelector('.icon-more').addEventListener('touchend', function(e){
    321. 

  321. 				restart();
    322. 

  322. 				pgvSendClick({hottag:'a20140515bandage.restart'});
    323. 

  323. 			});
    324. 

  324. 

  325. 			document.querySelector('.icon-share').addEventListener('touchend', function(){
    326. 

  326. 				// 微信已停止开放该接口
    327. 

  327. 				// WeixinJSBridge.invoke("sendAppMessage", {
    328. 

  328. 				//     img_url:"./images/pic2.jpg",
    329. 

  329. 				//     img_width: "120",
    330. 

  330. 				//     img_height: "125",
    331. 

  331. 				//     link: "http://baidu.com",
    332. 

  332. 				//     desc: "这是描述",
    333. 

  333. 				//     title: "这是标题"
    334. 

  334. 				// }, function (res) {
    335. 

  335. 				//     alert(res.err_msg);
    336. 

  336. 				// });
    337. 

  337. 				document.querySelector('.share-guide').style.display = 'block';
    338. 

  338. 				pgvSendClick({hottag:'a20140515bandage.share.post'});
    339. 

  339. 			});
    340. 

  340. 

  341. 			document.querySelector('.share-guide').addEventListener('touchend', function(){
    342. 

  342. 				this.style.display = 'none';
    343. 

  343. 			});
    344. 

  344. 

  345. 

  346. 			document.querySelector('.icon-play').addEventListener('touchend', function(e){
    347. 

  347. 				pgvSendClick({hottag:'a20140515bandage.play'});
    348. 

  348. 				window.open('play.html');
    349. 

  349. 			});
    350. 

  350. 

  351. 			if(/adtag/i.test(window.location.search)) {
    352. 

  352. 				pgvSendClick({hottag:'a20140515bandage.share.view'});
    353. 

  353. 			}
    354. 

  354. 

  355. 

  356. 

  357. 		});
    358. 

  358. 

  359. 		
    360. 

  360. 

  361. 

  362. 

  363. 

  364. 		// disabled default events
    365. 

  365. 		document.documentElement.addEventListener('touchmove', function(e){
    366. 

  366. 			e.preventDefault();
    367. 

  367. 		});
    368. 

  368. 	</script>
    369. 

  369. 	<script>
    370. 

  370. 	descs = ['经鉴定为手残党，你敢不敢来试？', '我的手速被鄙视了，男人（妹子）不能这样！你呢？', '你绝对忍不住只玩一次！拼手速怎么可以输？', '风靡全球的抽绷带游戏，手残忍不住就是要点啊！', '我是全球手速最快的1%，不服来战！'];
    371. 

  371. 

  372. 	shareURL = 'http://hero.qq.com/act/a20140515bandage/?ADTAG=a20140515bandage.share.view';
    373. 

  373. 

  374. 	
    375. 

  375. 	// function onBridgeReady() {
    376. 

  376. 	//     WeixinJSBridge.invoke("getNetworkType", {}, function (res) {
    377. 

  377. 	//         pgvSendClick({hottag:'a20140515bandage.net.' + res.err_msg.substr(13)});
    378. 

  378. 	//     });	
    379. 

  379. 	//     //转发朋友圈
    380. 

  380. 	//     WeixinJSBridge.on("menu:share:timeline", function(e) {
    381. 

  381. 	//         var data = {
    382. 

  382. 	//             img_url: "./images/pic"+(level+1)+".jpg",
    383. 

  383. 	//             img_width: "150",
    384. 

  384. 	//             img_height: "150",
    385. 

  385. 	//             link: shareURL,
    386. 

  386. 	//             //desc这个属性要加上，虽然不会显示，但是不加暂时会导致无法转发至朋友圈，
    387. 

  387.  //                desc: '治愈系【全民打怪兽】',
    388. 

  388.  //                title: '我的手速打败了'+ (function(){var per = parseInt(score/12);return per > 99 ? 99 : per})()+'%的人！治愈系【全民打怪兽】'
    389. 

  389. 	//         };
    390. 

  390. 	//     WeixinJSBridge.invoke("shareTimeline", data, function(res) {
    391. 

  391. 	//         WeixinJSBridge.log(res.err_msg)
    392. 

  392. 	//     });
    393. 

  393. 	// });
    394. 

  394. 	//     //同步到微博
    395. 

  395. 	//     WeixinJSBridge.on("menu:share:weibo", function() {
    396. 

  396. 	//         WeixinJSBridge.invoke("shareWeibo", {
    397. 

  397. 	//            "content":  '我的手速打败了'+ (function(){var per = parseInt(score/12);return per > 99 ? 99 : per})()+'%的人！治愈系【全民打怪兽】',
    398. 

  398. 	//            "url": shareURL
    399. 

  399. 	//              }, function(res) {
    400. 

  400. 	//                  WeixinJSBridge.log(res.err_msg);
    401. 

  401. 	//             });
    402. 

  402. 	//     });
    403. 

  403. 	//     //分享给朋友
    404. 

  404. 	//     WeixinJSBridge.on('menu:share:appmessage', function(argv) {
    405. 

  405. 	//         WeixinJSBridge.invoke("sendAppMessage", {
    406. 

  406. 	//             img_url: "./images/pic"+(level+1)+".jpg",
    407. 

  407. 	//             img_width: "150",
    408. 

  408. 	//             img_height: "150",
    409. 

  409. 	//             link: shareURL,
    410. 

  410.  //                desc: '治愈系【全民打怪兽】',
    411. 

  411.  //                title: '我的手速打败了'+ (function(){var per = parseInt(score/12);return per > 99 ? 99 : per})()+'%的人！治愈系【全民打怪兽】'
    412. 

  412. 	//         }, function(res) {
    413. 

  413. 	//             WeixinJSBridge.log(res.err_msg)
    414. 

  414. 	//         });
    415. 

  415. 	//     });
    416. 

  416. 	// };
    417. 

  417. 	// document.addEventListener('WeixinJSBridgeReady', function() {
    418. 

  418. 	//     onBridgeReady();
    419. 

  419. 	// });
    420. 

  420. 	</script>
    421. 

  421. </body>
    422. 

  422. </html><!--[if !IE]>|xGv00|018dd7e82cc2f276430005bdb2ebd151<![endif]-->
    423.