Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
root
/
tv_xiaoyouxi
Figyelés 1
Kedvenc 0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Fa: d1c3c48a01
Branch-ok Tag-ek
tv_xiaoyouxi
/
games
/
ttfc
/
index.html

index.html 39 KB
Előzmények Nyers

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808 
  1. 

  2. <!doctype html> 
    3. 

  3. <html> 
    4. 

  4. <head> 
    5. 

  5.     <meta charset="utf-8">
    6. 

  6.     <meta name="robots" content="all" />
    7. 

  7.     <meta name="Copyright" content="TENCNET" />
    8. 

  8.     <meta name="author" content="Tencent-TGideas" />
    9. 

  9.     <title>【天天飞车·全新超级配件版本上线】最炫科技风</title>
    10. 

  10. 	<meta name="Keywords" content="天天飞车,女神,天天飞车女神评选活动,天天飞车视频,天天飞车礼包,微信/手Q游戏,极速闪避"/>
    11. 

  11. 	<meta name="Description" content="《天天飞车》是一款3D写实极速闪避类手机游戏，《QQ飞车》原班人马打造。酷炫赛车，逼真场景，刺激玩法，让你感受与众不同手游新乐趣。"/>
    12. 

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

  13.     <!-- 设计：yafee | 重构：shine | 创建：20140711 | 团队博客：http://tgideas.qq.com -->
    14. 

  14.     <style>
    15. 

  15. 		body,h1,h2,h3,h4,dl,dt,dd,ul,ol,li,p{margin:0;padding:0;}
    16. 

  16. 		table{border-collapse:collapse;border-spacing:0}
    17. 

  17. 		h1,h2,h3,h4{font-size:100%}
    18. 

  18. 		ul,li{list-style:none}
    19. 

  19. 		em,i{font-style:normal}
    20. 

  20. 		img{border:0}
    21. 

  21. 		input,img{vertical-align:middle}
    22. 

  22. 		body{
    23. 

  23. 		         min-width:320px;
    24. 

  24. 		         color:#fff;
    25. 

  25. 		         font-family:Helvetica,Arial;
    26. 

  26. 		         -webkit-text-size-adjust:none;
    27. 

  27. 		         background-color: #000;
    28. 

  28. 		         font-size: 14px;
    29. 

  29. 		         word-wrap: break-word;
    30. 

  30. 		         word-break:keep-all;
    31. 

  31. 		         overflow: hidden;
    32. 

  32. 		         -webkit-user-select:none;
    33. 

  33. 		         -webkit-touch-callout:none;
    34. 

  34. 		         -webkit-tap-highlight-color: rgba(0,0,0,0);
    35. 

  35. 		         -webkit-font-smoothing: antialiased;
    36. 

  36. 		}
    37. 

  37. 		html,body{height:100%;}
    38. 

  38. 		a{color:#fff; text-decoration:none; display:block;}
    39. 

  39. 

  40. 		.road{width: 155px; margin:0 auto; position: absolute; right:0; top:0; bottom:130px; overflow: hidden; left:12px;}
    41. 

  41. 		.road img{width: 155px; height:350px;}
    42. 

  42. 		.road-inner{ position: absolute; top:-350px; left:0; width: 100%;}
    43. 

  43. 		.road-arrow{width: 20px; height:25px; background:url(./images/road-arrow.png?201407110132) no-repeat; background-size: 20px 25px; position: absolute; left:50%; margin-left: -10px; top:10px; z-index:3;}
    44. 

  44. 		.car{width: 121px; height:299px; position: absolute; top:54px; left:50%; margin-left: -55px;}
    45. 

  45. 		.car img{width: 121px; height:240px;}
    46. 

  46. 		.car-normal{width: 82px; height:83px; position: absolute; top:100px; left:33px;}
    47. 

  47. 		.car-cry,
    48. 

  48. 		.car-laugh{background:url(./images/car-status.png?201407110132) no-repeat; background-size: 212px 180px; width: 212px; height:81px; position: absolute; top:107px; left:-61px;}
    49. 

  49. 

  50. 		.car-laugh{background-position: 0 -100px; -webkit-tranisition}
    51. 

  51. 

  52. 		.tools{width: 320px; height:130px; text-align: center; background:url(./images/toolsbar.jpg?201407110132) no-repeat; background-size: 320px 130px;  z-index: 3; position: absolute; bottom:0;}
    53. 

  53. 		.tools span{display: inline-block; margin:10px 1px 0; position: relative;}
    54. 

  54. 		.tools img{width: 70px; height:auto; display: block;}
    55. 

  55. 		.tools em{position: absolute; bottom:-12px; width: 100%; left:0; right:0; color:#61615F;}
    56. 

  56. 		.hour{width: 75px; height:98px; background:url(./images/hours.png?201407110132) no-repeat; background-size: 75px 98px; position: absolute; right:0; top:90px; color:#fff;}
    57. 

  57. 		.hour span{position: absolute; top:50px; left:19px; font-size89px; color:#3c879a;}
    58. 

  58. 		.hour b{font-size:12px; color:#39fffa; margin-right: 4px;}
    59. 

  59. 

  60. 		.loading{width: 50px; height:50px; border-radius:50px; border:5px solid #f60; display: inline-block;  margin-top: 150px;}
    61. 

  61. 

  62. 

  63. 		.load{text-align: center;  background-color: #050505; overflow: hidden; display: block; z-index: 9;}
    64. 

  64. 		.loadBg{background:url(./images/loadbg.jpg?201407110132) no-repeat; width: 265px; height:267px; background-size: 265px 267px; position: absolute; left:50%; margin-left: -133px; top:20%;}
    65. 

  65. 		.loadGif{background:url(./images/wheel.png?201407110132) no-repeat; width: 106px; height:106px; background-size: 106px 106px; position: absolute; top:54px; left:82px; -webkit-animation: rotate 3s infinite linear;}
    66. 

  66. 

  67. 

  68. 		.spinner{text-align: center; background-color: #e2b105;}
    69. 

  69. 		.page{position: absolute; top:0; left:0; right:0; bottom:0;}
    70. 

  70. 		.main{background:url(./images/bg.jpg?201407110132) no-repeat top center #161616; width: 320px; margin:0 auto; background-size: 320px 480px; display: block;}
    71. 

  71. 

  72. 		.guide{text-align: center; overflow: hidden; background: rgba(0,0,0,.8); z-index: 8;}
    73. 

  73. 		.guideArrow{width: 24px; height:24px; border-top: solid 3px #9E9E9E; border-right: solid 3px #9E9E9E; top: 50%; right: 15px; margin-top: -24px; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute;}
    74. 

  74. 		.guidebar{width: 320px; height:130px; position: absolute;  bottom:0; left:50%; margin-left: -160px;}
    75. 

  75. 		.guidebaPoint{width: 232px; height:176px; background:url(./images/guidebarpoint.png?201407110132) no-repeat; background-size:232px 176px; position: absolute; top:-61px; left:50%; margin-left: -116px; z-index: 3;}
    76. 

  76. 		.guidebarBg{width: 320px; height:90px; background:url(./images/guidebar.jpg?201407110132) no-repeat; background-size:320px 90px; position: relative; z-index: 2;}
    77. 

  77. 		.guidebarBlank{background-color: #000; position: absolute; top:85px; left:0; right:0; bottom:0;}
    78. 

  78. 		
    79. 

  79. 		.guideList {width: 1000%;height: 100%;}
    80. 

  80. 		.guideList li{float: left; width: 10%; height: 100%; position: relative;}
    81. 

  81. 		.guide .progress-bar{position: absolute;bottom: 0;width: 100%;height: 30px;text-align: center;}
    82. 

  82. 		.guide .progress-bar li{display: inline-block;width: 20px;height: 20px;border-radius: 10px;background-color: #494949;-webkit-transform: scale(0.5, 0.5);}
    83. 

  83. 		.guide .progress-bar .current{background-color: #fff;}
    84. 

  84. 

  85. 		.propListTit{margin:20px auto 0; width: 280px; text-align: left;}
    86. 

  86. 		.propList{margin: 15px auto 0; width: 280px;}
    87. 

  87. 		.propList dt{font-size:13px; padding-left: 10px;  height:30px; line-height: 30px; text-align: left;}
    88. 

  88. 		.propList dd{ height:95px;}
    89. 

  89. 		.propGood dt{background:rgba(82,199,87,.34);}
    90. 

  90. 		.propGood dd{background:rgba(68,133,66,.34);}
    91. 

  91. 		.propBad dt{background:rgba(200,80,80,.34);}
    92. 

  92. 		.propBad dd{background:rgba(169,70,70,.34);}
    93. 

  93. 		.propList img{width: 70px;}
    94. 

  94. 		.propList p{float:left;}
    95. 

  95. 		.propList p span{display:block; text-align: center; margin-top: -10px; color:#6c8568; font-size:11px;}
    96. 

  96. 

  97. 		.begin{width: 172px; height:60px; font-size:18px; border:2px solid #fff; line-height: 60px; color:#fff;  position: absolute; bottom:50px; left:50%; margin-left: -86px;}
    98. 

  98. 		.intro{margin-top: 150px; color:#fff; line-height: 2; font-size:18px;}
    99. 

  99. 		.intro strong{color:#ffe607;}
    100. 

  100. 		.intro b{color:#ee2f2f;}
    101. 

  101. 		@-webkit-keyframes rotate {
    102. 

  102. 		  0% {-webkit-transform:rotate(0deg);}
    103. 

  103. 		  100% {-webkit-transform:rotate(360deg);}
    104. 

  104. 		}
    105. 

  105. 

  106. 		.oils{width: 25px; height:168px; background:url(./images/oil.png?201407110132) no-repeat; background-size:35px 223px; position: absolute; left:0; top:84px; padding-top: 32px; padding-left: 10px;}
    107. 

  107. 		.oils span{width: 15px; height:13px; display: block; background:url(./images/oil.png?201407110132) no-repeat 0 -210px; background-size:35px 223px; margin-bottom: 2px; }
    108. 

  108. 		.oils .blank{background: none;}
    109. 

  109. 		.miles{width: 114px; height:70px; background:url(./images/miles.png?201407110132) no-repeat; background-size: 114px 70px; position: absolute; left:0; top:15px; font-size:11px; color:#c3ffb8;}
    110. 

  110. 		.miles em{position: absolute; left:10px; top:27px; font-style: normal;}
    111. 

  111. 		.miles b{margin-right: 4px; font-size:25px;}
    112. 

  112. 		.miles strong{font-size:15px; color:#d2cebf; position: absolute; top:6px; right:37px;}
    113. 

  113. 		.car-normal{-moz-transition: all 6s linear 0s; opacity:0;}
    114. 

  114. 		#carStatus{transition: opacity 2s ease-out;}
    115. 

  115. 

  116. 		#carText{width: 140px; text-align: center; font-size:15px; color:#fff; margin:21px 0 0 70px; padding:10px 5px 6px 0; height:30px;  font-weight:bold; z-index: 3; font-size:15px;}
    117. 

  117. 

  118. 		.share{background-color: #000; opacity:0.8; position: absolute; top:0; bottom:0; left:0; right:0; display: none; z-index: 3;}
    119. 

  119. 		.share .btn{width: 40px; height:40px; background-color: #f60; color:#fff; font-size:16px; display: inline-block; margin-left: 20px; }
    120. 

  120. 

  121. 		.shareSl {color:#fff; font-size:12px;  font-size:15px; width: 205px; margin:15px auto 0; text-align: center; line-height: 1.4;}
    122. 

  122. 		.shareSl  b{color:#fef000;}
    123. 

  123. 

  124. 		.shareShow{width: 273px; height:160px; background:url(./images/shareShow.png?201407110132) no-repeat; background-size: 273px 159px; margin:5px auto 0; color:#fff; font-size:12px; text-align: center;  line-height: 1.5;}
    125. 

  125. 		
    126. 

  126. 		.shareData{padding-top: 35px; position: relative; z-index: 2;}
    127. 

  127. 		.shareData b{font-size:35px; margin-right: 4px;}
    128. 

  128. 		.shareData em{font-size:24px;}
    129. 

  129. 

  130. 		.propShow{display: none;}
    131. 

  131. 		.propShow img{width: 65px; float:left; margin-left: 28px; margin-top: 38px;}
    132. 

  132. 		.propShow h2{margin-left: 105px; padding-top: 50px; font-size:15px; margin-bottom: 8px; color:#fff; text-align: left;}
    133. 

  133. 		.propShow p{margin-left: 105px; color:#949494; text-align: left; margin-right: 35px;}
    134. 

  134. 

  135. 		.shareAction{margin-top: 15px; text-align: center;}
    136. 

  136. 		.shareAction span{width: 130px; height:48px; display: inline-block; margin-left: 4px; margin-right: 9px; background-size:130px 48px;}
    137. 

  137. 		.shareTip{display: none; background:url(./images/shareTip.png?201407110132) no-repeat; width: 165px; height:74px; background-size: 165px 74px; position: absolute; top:8px; right:15px;}
    138. 

  138. 		.btnShare{background:url(./images/btnShare.jpg?201407110132) no-repeat;background-size:130px 48px;}
    139. 

  139. 		.btnAgain{background:url(./images/btnAgain.jpg?201407110132) no-repeat;background-size:130px 48px;}
    140. 

  140. 

  141. 		.copyright{text-align: center; margin-top: 15px;}
    142. 

  142. 		.copyright .logo{background:url(./images/logo.png?201407110132) no-repeat; width: 91px; height:39px; background-size: 91px 39px; display:inline-block; vertical-align: middle;}
    143. 

  143. 		.btnDown{display: inline-block; width: 73px; height:30px; text-align: center; border:2px solid #008fd1; color:#008fd1; font-size:12px; line-height: 30px; vertical-align: middle; margin-left: 10px;}
    144. 

  144. 

  145. 		.askPropbar{margin:-5px auto 0; width: 273px; height:81px;}
    146. 

  146. 		.askPropbar p{color:#fff; font-size:12px; margin-bottom: 18px;}
    147. 

  147. 		.askPropbar li{float:left; margin-left: 5px; margin-right: 5px; position: relative;}
    148. 

  148. 		.askPropbar li img{width: 48px; height:48px;}
    149. 

  149. 		.askPropbar li span{position: absolute; top:-6px; left:-5px; width: 12px; height:12px; background-image:url("./images/circle.png"); background-size:12px 12px; -webkit-animation: propTip 1s infinite alternate; animation: propTip 1s infinite alternate;}
    150. 

  150.  
    151. 

  151. 		.askPropbar li:nth-child(1) span{-webkit-animation-delay:0s; animation-delay:0s;}
    152. 

  152. 		.askPropbar li:nth-child(2) span{-webkit-animation-delay:250ms; animation-delay:250ms;}
    153. 

  153. 		.askPropbar li:nth-child(3) span{-webkit-animation-delay:500ms; animation-delay:500ms;}
    154. 

  154. 		.askPropbar li:nth-child(4) span{-webkit-animation-delay:750ms; animation-delay:750ms;}
    155. 

  155. 

  156. 		@-webkit-keyframes propTip {
    157. 

  157. 			0% {
    158. 

  158. 				-webkit-transform:scale(0.8);  
    159. 

  159. 			}
    160. 

  160. 			100%{
    161. 

  161. 				-webkit-transform:scale(1.2);
    162. 

  162. 			}
    163. 

  163. 		}
    164. 

  164. 		@keyframes propTip {
    165. 

  165. 			0% {
    166. 

  166. 				transform:scale(0.8);  
    167. 

  167. 			}
    168. 

  168. 			100%{
    169. 

  169. 				transform:scale(1.2);
    170. 

  170. 			}
    171. 

  171. 		}
    172. 

  172. 		/*===== 450px =====*/
    173. 

  173. 		@media screen and (max-height:450px) {
    174. 

  174. 			.begin{margin-top: 50px;}
    175. 

  175. 			.car{top:34px;}
    176. 

  176. 			.shareShow{margin-top: 0;}
    177. 

  177. 			.askPropbar{margin-top: -5px;}
    178. 

  178. 			.shareAction{margin-top: 15px;}
    179. 

  179. 			.copyright{margin-top: 15px;}
    180. 

  180. 			.propListTit{margin-top: 15px;}
    181. 

  181. 			.begin{bottom:30px;}
    182. 

  182. 			.shareSl{margin-top: 10px;}
    183. 

  183. 		}
    184. 

  184. 

  185. 		.oils,.miles,.hour,.car{-webkit-transition: all 1s; transition: all 1s;}
    186. 

  186. 

  187. 		.cover {
    188. 

  188. 			position: absolute;
    189. 

  189. 			top:0; right:0; left:0; bottom:130px;
    190. 

  190. 			background: -webkit-linear-gradient(90deg,#1F1B18,rgba(5,5,4,0) 10%,rgba(5,5,4,0) 90%,#050504);
    191. 

  191. 			background: linear-gradient(0,#1F1B18,rgba(5,5,4,0) 10%,rgba(5,5,4,0) 90%, #050504);
    192. 

  192. 			pointer-events: none;
    193. 

  193. 			-webkit-backface-visibility: hidden;
    194. 

  194. 		}
    195. 

  195.     </style>
    196. 

  196. </head>
    197. 

  197. <body>
    198. 

  198. 	<div class="page load">
    199. 

  199. 		<div class="loadBg">
    200. 

  200. 			<div class="loadGif"></div>
    201. 

  201. 		</div>
    202. 

  202. 		<div class="logo"></div>
    203. 

  203. 	</div>
    204. 

  204. 	<div class="page guide" id="guide">
    205. 

  205. 		<ul class="guideList" id="guideList">
    206. 

  206. 			<li>
    207. 

  207. 				<div class="intro">
    208. 

  208. 					<p><strong>拖动超级配件，</strong>使赛车更快更强哦！</p>
    209. 

  209. 					<p>注意<strong>丢掉奇怪的配件</strong>哟~</p>
    210. 

  210. 				</div>
    211. 

  211. 				<div class="guidebar">
    212. 

  212. 					<div class="guidebaPoint"></div>
    213. 

  213. 					<div class="guidebarBg"></div>
    214. 

  214. 					<div class="guidebarBlank"></div>
    215. 

  215. 				</div>
    216. 

  216. 				<div class="guideArrow"></div>
    217. 

  217. 			</li>
    218. 

  218. 			<li>
    219. 

  219. 				<h2 class="propListTit">道具一览表</h2>
    220. 

  220. 				<dl class="propList propGood">
    221. 

  221. 					<dt>这里的道具都是大有好处的哟 ~</dt>
    222. 

  222. 					<dd>
    223. 

  223. 						<p><img src="./images/tools1.png?201407110132"><span>加速引擎</span></p>
    224. 

  224. 						<p><img src="./images/tools2.png?201407110132"><span>里程芯片</span></p>
    225. 

  225. 						<p><img src="./images/tools3.png?201407110132"><span>招财挂件</span></p>
    226. 

  226. 						<p><img src="./images/tools4.png?201407110132"><span>幸运油箱</span></p>
    227. 

  227. 					</dd>
    228. 

  228. 				</dl>
    229. 

  229. 				<dl class="propList propBad">
    230. 

  230. 					<dt>下面这些道具会让你的赛车遭殃的！</dt>
    231. 

  231. 					<dd>
    232. 

  232. 						<p><img src="./images/tools5.png?201407110132"><span>香蕉皮</span></p>
    233. 

  233. 						<p><img src="./images/tools6.png?201407110132"><span>大钉子</span></p>
    234. 

  234. 						<p><img src="./images/tools7.png?201407110132"><span>交警叔叔</span></p>
    235. 

  235. 						<p><img src="./images/tools8.png?201407110132"><span>油漆</span></p>
    236. 

  236. 					</dd>
    237. 

  237. 				</dl>
    238. 

  238. 				<span class="begin" id="begin">开始游戏</span>
    239. 

  239. 			</li>
    240. 

  240. 		</ul>
    241. 

  241. 	</div>
    242. 

  242. 	<div class="page main">
    243. 

  243. 		<div class="road">
    244. 

  244. 			<div class="road-arrow"></div>
    245. 

  245. 			<div class="road-inner" id="road" style="-webkit-transform: translateY(0px);">
    246. 

  246. 				<img src="./images/road.jpg?201407110132" alt="">
    247. 

  247. 				<img src="./images/road.jpg?201407110132" alt="">
    248. 

  248. 				<img src="./images/road.jpg?201407110132" alt="">
    249. 

  249. 			</div>
    250. 

  250. 		</div>
    251. 

  251. 		<div class="cover"></div>
    252. 

  252. 		<div class="car" id="car">
    253. 

  253. 			<img src="./images/car.png?201407110132" id="carFeature">
    254. 

  254. 			<div class="car-normal" id="carStatus"><div id="carText"></div></div>
    255. 

  255. 		</div>
    256. 

  256. 		<div class="oils" id="oils">
    257. 

  257. 			<span></span>
    258. 

  258. 			<span></span>
    259. 

  259. 			<span></span>
    260. 

  260. 			<span></span>
    261. 

  261. 			<span></span>
    262. 

  262. 			<span></span>
    263. 

  263. 			<span></span>
    264. 

  264. 			<span></span>
    265. 

  265. 			<span></span>
    266. 

  266. 			<span></span>
    267. 

  267. 			<span></span>
    268. 

  268. 		</div>
    269. 

  269. 		<div class="miles" id="miless">
    270. 

  270. 			<strong>L<span id="milesPoint">1</psan></strong>
    271. 

  271. 			<em><b id="miles">0</b>km</em>
    272. 

  272. 		</div>
    273. 

  273. 		<div class="hour" id="hours">
    274. 

  274. 			<span><b id="hour">0</b>km</span>
    275. 

  275. 		</div>
    276. 

  276. 		<div class="tools" id="tools">
    277. 

  277. 			<span><img src="./images/tools1.png?201407110132" type="1"tip="引擎改装成功！飚起来！"><em>加速引擎</em></span>
    278. 

  278. 			<span><img src="./images/tools2.png?201407110132" type="0" tip="芯片改装成功！飚起来！" ><em>里程芯片</em></span>
    279. 

  279. 			<span><img src="./images/tools3.png?201407110132" type="3" tip="挂饰改装成功！飚起来！" ><em>招财挂件</em></span>
    280. 

  280. 			<span><img src="./images/tools4.png?201407110132" type="0" tip="油箱改装成功！飚起来！" ><em>幸运油箱</em></span>
    281. 

  281. 		</div>
    282. 

  282. 	</div>
    283. 

  283. 	<div class="page share" id="sharePage">
    284. 

  284. 		<div class="shareSl">【<b>天天飞车超级配件版本</b>】来袭，一起改装吧！</div>
    285. 

  285. 

  286. 		<div class="shareShow" id="shareShow">
    287. 

  287. 			<div class="shareData" id="shareData">
    288. 

  288. 				<p>你狂奔了 <b><span id="result">0</span></b><em>KM</em></p>
    289. 

  289. 				<p>击败了全国 <span id="resultB">0</span>% 的车手...</p>
    290. 

  290. 			</div>
    291. 

  291. 			<div class="propShow">
    292. 

  292. 				<img src="./images/tools1.png?201407110132">
    293. 

  293. 				<h2>加速引擎</h2>
    294. 

  294. 				<p>超强动力给你飞一般的感觉，提升赛车加速度！</p>
    295. 

  295. 			</div>
    296. 

  296. 			<div class="propShow">
    297. 

  297. 				<img src="./images/tools2.png?201407110132">
    298. 

  298. 				<h2>里程芯片</h2>
    299. 

  299. 				<p>享受科技升级带来幸福吧增加里程积分</p>
    300. 

  300. 			</div>
    301. 

  301. 			<div class="propShow">
    302. 

  302. 				<img src="./images/tools3.png?201407110132">
    303. 

  303. 				<h2>招财芯片</h2>
    304. 

  304. 				<p>财神贴身挂饰 <br>金币多多~</p>
    305. 

  305. 			</div>
    306. 

  306. 			<div class="propShow">
    307. 

  307. 				<img src="./images/tools4.png?201407110132">
    308. 

  308. 				<h2>祝福油箱</h2>
    309. 

  309. 				<p>更多燃油更远疾驰<br>增加单局额外油量！
    310. 

  310. </p>
    311. 

  311. 			</div>
    312. 

  312. 		</div>
    313. 

  313. 		<div class="shareTip" id="shareTip"></div>
    314. 

  314. 		<div class="askPropbar" id="askPropbar">
    315. 

  315. 			<p>新版本新道具闪亮登场 <img width="8" height="8" src="./images/arrow.png" /></p>
    316. 

  316. 			<ul>
    317. 

  317. 				<li>
    318. 

  318. 					<img src="./images/askProp1.jpg?201407110132" sort="1">
    319. 

  319. 					<span></span>
    320. 

  320. 				</li>
    321. 

  321. 				<li>
    322. 

  322. 					<img src="./images/askProp2.jpg?201407110132" sort="2">
    323. 

  323. 					<span></span>
    324. 

  324. 				</li>
    325. 

  325. 				<li>
    326. 

  326. 					<img src="./images/askProp3.jpg?201407110132" sort="3">
    327. 

  327. 					<span></span>
    328. 

  328. 				</li>
    329. 

  329. 				<li>
    330. 

  330. 					<img src="./images/askProp4.jpg?201407110132" sort="4">
    331. 

  331. 					<span></span>
    332. 

  332. 				</li>
    333. 

  333. 			</ul>
    334. 

  334. 		</div>
    335. 

  335. 		<div class="shareAction">
    336. 

  336. 			<span class="btnShare" id="share"></span><span class="btnAgain" id="again"></span>
    337. 

  337. 		</div>
    338. 

  338. 		<!-- <div class="copyright">
    339. 

  339. 			<div class="logo"></div><a href="http://ttfc.qq.com/act/a20140711modifyracing/play.htm" class="btnDown" onclick="pgvSendClick({hottag:'a20140711modifyracing.btns.begingame'});">+ 开始游戏</a>
    340. 

  340. 		</div> -->
    341. 

  341. 	</div>
    342. 

  342. <script>
    343. 

  343. 	(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)}}
    344. 

  344. </script>
    345. 

  345. <script>
    346. 

  346. 	(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}};window.m=e})(window.m),m.Car=function(e){this.config=m.extend(m.extend({},m.Car.config),e,!0)},m.Car.config={speed:30,stopSpeed:5,time:100,height:480},m.Car.prototype={init:function(){var e=this,t=e.config;e._data={},e.target=t.target,e.wrap=e.target;e.wrap.style.webkitTransform="translateY(0px)";t.bspeed=0;e.miles=0;e.switch()},switch:function(){var t=this,n=t.config;var obj=t.target;t.bspeed=0;t.switchTime=0;t.clear();t.timerSwitch=setInterval(function(){if(t.bspeed<n.speed){t.bspeed+=2}else{t.switchOver=true}t.miles+=t.bspeed*n.time;var num=(parseInt(obj.style.webkitTransform.replace(/[^0-9]/ig,""))+t.bspeed);t.bspeed=t.bspeed>0?Math.ceil(t.bspeed):Math.floor(t.bspeed);if(num<n.height){obj.style.webkitTransform="translateY("+num+"px)"}else{obj.style.webkitTransform="translateY(0px)"}t.switchTime++},n.time)},up:function(){var t=this;n=t.config;t.clear();if(t.bspeed<n.speed){t.switch();return false}else{t.bspeed=t.bspeed+3}t.change();var t=this;this.clear();t.timerUp=setInterval(function(){t.change();t.miles+=t.bspeed*n.time},n.time)},down:function(){var t=this;n=t.config;t.clear();if(t.bspeed>n.stopSpeed){t.bspeed-=3}else{t.stops();return false};var t=this;t.timerDown=setInterval(function(){t.change();t.miles+=t.bspeed*n.time},n.time)},stops:function(){var t=this;n=t.config;t.stopTime=0;t.timer=null;t.clear();t.timerStops=setInterval(function(){if(t.bspeed>n.stopSpeed){t.bspeed-=2}else{if(t.stopTime>20)t.bspeed-=2}t.change();t.stopTime++;if(!t.bspeed)clearTimeout(t.timerStops);t.miles+=t.bspeed*n.time;t.stopTime++},n.time)},change:function(){var t=this;n=t.config;var obj=n.target;var num=(parseInt(obj.style.webkitTransform.replace(/[^0-9]/ig,""))+t.bspeed);t.bspeed=t.bspeed>0?Math.ceil(t.bspeed):Math.floor(t.bspeed);if(num<n.height){obj.style.webkitTransform="translateY("+num+"px)"}else{obj.style.webkitTransform="translateY(0px)"}},clear:function(){var t=this;clearTimeout(t.timerSwitch);clearTimeout(t.timerUp);clearTimeout(t.timerDown);clearTimeout(t.timerStops)}}
    347. 

  347. </script>
    348. 

  348. <script type="text/javascript">
    349. 

  349. //防止屏幕拖动
    350. 

  350. document.documentElement.addEventListener('touchmove', function(e){e.preventDefault();});
    351. 

  351. 

  352. //define selctor
    353. 

  353. function g(obj){return (typeof obj=='object')?obj:document.getElementById(obj);}
    354. 

  354. 

  355. //动态生成JS或CSS;
    356. 

  356. function delay_js(url){var type=url.split("."),file=type[type.length-1];if(file=="css"){var obj=document.createElement("link"),lnk="href",tp="text/css";obj.setAttribute("rel","stylesheet");}else var obj=document.createElement("script"),lnk="src",tp="text/javascript";obj.setAttribute(lnk,url);obj.setAttribute("type",tp);file=="css"?document.getElementsByTagName("head")[0].appendChild(obj):document.body.appendChild(obj);return obj;};
    357. 

  357. 

  358. //延时加载并判断是否加载完毕
    359. 

  359. function loadjs(url,succ,v){var elem=delay_js(url);if((navigator.userAgent.indexOf('MSIE')==-1)?false:true){elem.onreadystatechange=function(){if(this.readyState&&this.readyState=="loading") return;else succ(v);};}else elem.onload=function(){succ(v);};elem.onerror=function(){};};
    360. 

  360. 

  361. 

  362. var per = 0;
    363. 

  363. var kilo = 0;
    364. 

  364. 

  365. //图片预加载
    366. 

  366. var imgPath= "./images/";
    367. 

  367. 

  368. var loadImage = function(path, callback){
    369. 

  369.     var img = new Image();
    370. 

  370.     img.onload = function(){
    371. 

  371.         img.onload = null;
    372. 

  372.         callback(path);
    373. 

  373.     }
    374. 

  374.     img.src = path;
    375. 

  375. }
    376. 

  376. function removeElement(_element){
    377. 

  377.          var _parentElement = _element.parentNode;
    378. 

  378.          if(_parentElement){
    379. 

  379.                 _parentElement.removeChild(_element);  
    380. 

  380.          }
    381. 

  381. }
    382. 

  382. var loadingPage = (function(){
    383. 

  383.     var sourceArr = ['guidebarpoint.png?201407110132','guidebar.jpg?201407110132','tools1.png?201407110132','tools2.png?201407110132','tools3.png?201407110132','tools4.png?201407110132','tools5.png?201407110132','tools6.png?201407110132','tools7.png?201407110132','tools8.png?201407110132','car.png?201407110132','car-sep.png?201407110132','road.jpg?201407110132'];
    384. 

  384.     for (var i = 0; i < sourceArr.length; i++) {
    385. 

  385.         sourceArr[i] = (imgPath + sourceArr[i]);
    386. 

  386.     };
    387. 

  387.     var imgLoader = function(imgs, callback){
    388. 

  388.         var len = imgs.length, i = 0;
    389. 

  389.         while(imgs.length){
    390. 

  390.             loadImage(imgs.shift(), function(path){
    391. 

  391.                 callback(path, ++i, len);
    392. 

  392.             });
    393. 

  393.         }
    394. 

  394.     }
    395. 

  395.     imgLoader(sourceArr, function(path, curNum, total){
    396. 

  396.         var percent = curNum/total;
    397. 

  397.         if(percent == 1){
    398. 

  398.     		//loading页隐藏
    399. 

  399. 		 	var domLoading = document.querySelector('.load');
    400. 

  400. 			removeElement(domLoading);
    401. 

  401. 			// guide loading
    402. 

  402. 			var guideSlide = new m.Tab({
    403. 

  403. 				target: document.querySelectorAll('.guideList li'),
    404. 

  404. 						trigger: document.querySelectorAll('.guideList li'),
    405. 

  405. 						touchMove: true,
    406. 

  406. 						direction: 'x',
    407. 

  407. 						progressBar: true
    408. 

  408. 

  409. 			});
    410. 

  410. 			g("guideList").getElementsByTagName("li")[0].onclick = function(){
    411. 

  411. 				guideSlide.next();
    412. 

  412. 			}
    413. 

  413.             setTimeout(gameLoading,500);
    414. 

  414.         }
    415. 

  415.     });
    416. 

  416. })();
    417. 

  417. 

  418. 

  419. 

  420. //道具详情信息展示
    421. 

  421. function propDetail(e) {
    422. 

  422. 	var target = e.target;
    423. 

  423. 	if(target.tagName == "IMG"){
    424. 

  424. 		e.stopPropagation() ;
    425. 

  425. 		var shareData = g("shareData");
    426. 

  426. 		if(shareData.style.display= "none"){
    427. 

  427. 			shareData.style.display="none";
    428. 

  428. 		}
    429. 

  429. 		var sort = target.getAttribute("sort");
    430. 

  430. 		var propShows = document.querySelectorAll(".propShow");
    431. 

  431. 		for(var i=0; i<propShows.length; i++){
    432. 

  432. 			propShows[i].style.display = "none";
    433. 

  433. 		}
    434. 

  434. 		document.querySelectorAll(".propShow")[sort-1].style.display = "block";
    435. 

  435. 	}
    436. 

  436. }
    437. 

  437. //初始化道具
    438. 

  438. function propReset(){
    439. 

  439. 	var tools = g("tools").getElementsByTagName("img");
    440. 

  440. 	for(var i=0; i<tools.length; i++){
    441. 

  441. 		var randNum=Math.floor(Math.random()*4+1);
    442. 

  442. 		tools[i].src = propsObjs[randNum].url;
    443. 

  443. 		tools[i].setAttribute("type",propsObjs[randNum].type);
    444. 

  444. 		tools[i].setAttribute("tip",propsObjs[randNum].tip);
    445. 

  445. 		tools[i].setAttribute("num",propsObjs[randNum].id);
    446. 

  446. 		tools[i].setAttribute("name",propsObjs[randNum].name);
    447. 

  447. 		tools[i].parentNode.getElementsByTagName("em")[0].innerHTML = propsObjs[randNum].name;
    448. 

  448. 

  449. 	}
    450. 

  450. }
    451. 

  451. function updateProp(target,num){
    452. 

  452. 	 parent = target.parentNode
    453. 

  453. 	// parent.removeChild(target);
    454. 

  454. 	// var objImg = document.createElement("img");//div创建成功
    455. 

  455. 

  456. 	var randNum = Math.floor(Math.random()*100);
    457. 

  457. 	if(randNum<60){
    458. 

  458. 		 randNum=Math.floor(Math.random()*3);
    459. 

  459. 	}else{
    460. 

  460. 		 randNum=Math.floor(Math.random()*num+3);
    461. 

  461. 	}
    462. 

  462. 	//console.log(randNum+" rand");
    463. 

  463. 	target.src = propsObjs[randNum].url;
    464. 

  464. 	target.setAttribute("type",propsObjs[randNum].type);
    465. 

  465. 	target.setAttribute("tip",propsObjs[randNum].tip);
    466. 

  466. 	target.setAttribute("num",propsObjs[randNum].id);
    467. 

  467. 	target.setAttribute("name",propsObjs[randNum].name);
    468. 

  468. 	// parent.appendChild(objImg);
    469. 

  469. 	parent.getElementsByTagName("em")[0].innerHTML = propsObjs[randNum].name;
    470. 

  470. 

  471. 	
    472. 

  472. 

  473. }
    474. 

  474. var propsObjs = [
    475. 

  475. 	{id:1,name:"加速引擎",url:"./images/tools1.png?201407110132",type:"1",tip:"引擎改装成功！飚起来！"},
    476. 

  476. 	{id:2,name:"里程芯片",url:"./images/tools2.png?201407110132",type:"1",tip:"芯片改装成功！飚起来！"},
    477. 

  477. 	{id:3,name:"招财挂件",url:"./images/tools3.png?201407110132",type:"3",tip:"挂饰改装成功！飚起来！"},
    478. 

  478. 	{id:4,name:"幸运油箱",url:"./images/tools4.png?201407110132",type:"1",tip:"油箱改装成功！飚起来！"},
    479. 

  479. 	{id:5,name:"香蕉皮",url:"./images/tools5.png?201407110132",type:"0",tip:"您的赛车踩到了香蕉皮，滑到拉~"},
    480. 

  480. 	{id:6,name:"大钉子",url:"./images/tools6.png?201407110132",type:"0",tip:"赛车轮胎被图钉扎破拉，好惨~"},
    481. 

  481. 	{id:7,name:"交警叔叔",url:"./images/tools7.png?201407110132",type:"0",tip:"秉公执法的交警拦下了你的车~"},
    482. 

  482. 	{id:8,name:"油漆",url:"./images/tools8.png?201407110132",type:"0",tip:"新车惨遭油漆洗礼，人生好艰难~"}
    483. 

  483. ]
    484. 

  484. 

  485. //汽车油量更新
    486. 

  486. function oilsModify(string,curnum){
    487. 

  487. 	var  oils = g("oils").getElementsByTagName("span");
    488. 

  488. 	if(string == "reset"){
    489. 

  489. 		for(var i=0; i< oils.length; i++){
    490. 

  490. 	 		oils[i].className = "";
    491. 

  491. 	 	}
    492. 

  492. 	}
    493. 

  493.  	else{
    494. 

  494.  		oils[curnum].className = "blank";
    495. 

  495.  	}
    496. 

  496. }
    497. 

  497. function updateImgUrl(imgs,filename){
    498. 

  498. 	for(var i=0; i<imgs.length; i++){
    499. 

  499. 		imgs[i].src = filename;
    500. 

  500. 	}
    501. 

  501. }
    502. 

  502. 

  503. function gameLoading(){	//预加载完成后动作
    504. 

  504.  		g("begin").onclick = function(){
    505. 

  505.  			// pgvSendClick({hottag:'a20140711modifyracing.btns.begingame'}); 
    506. 

  506.  			removeElement(g('guide'));
    507. 

  507.  			 var car = new m.Car({
    508. 

  508. 		        target: g("road"),
    509. 

  509. 		        speed: 20,
    510. 

  510. 		        stopSpeed:2,
    511. 

  511. 		        time: 50,
    512. 

  512. 		        height:350
    513. 

  513. 	        });
    514. 

  514. 

  515.  			var pointNum = 1;
    516. 

  516. 

  517.  			function play(){
    518. 

  518.  				propReset();
    519. 

  519.  			 	car.init();
    520. 

  520.  			 	pointNum = 1;
    521. 

  521.  			 	var  startNum = 0;
    522. 

  522.  			 	var  endNum =11;
    523. 

  523. 

  524.  			 	oilsModify("reset");
    525. 

  525.  			 	var points = 1;
    526. 

  526.  			 	g("milesPoint").innerHTML = points;
    527. 

  527. 

  528.  			 	var roadImgs = g("road").getElementsByTagName("img");;
    529. 

  529.  			 	updateImgUrl(roadImgs,"./images/road.jpg?201407110132");
    530. 

  530.  			 	//油箱与时速时时更新
    531. 

  531.  			 	 setInterval(function(){
    532. 

  532. 			    	hour = g("hour").innerHTML = parseInt(car.bspeed*4);
    533. 

  533. 			    	g("miles").innerHTML = (car.miles/8000).toFixed(1);
    534. 

  534. 			    },1000);
    535. 

  535. 

  536.  			 	var endTimer = setInterval(function(){
    537. 

  537.  			 		if(startNum == 1){
    538. 

  538.  			 			g("milesPoint").innerHTML = 2;
    539. 

  539.  			 			pointNum = 2;
    540. 

  540.  			 			loadImage(imgPath+"road2.jpg?201407110132",function(){
    541. 

  541.  			 				 	updateImgUrl(roadImgs,"./images/road2.jpg?201407110132");
    542. 

  542.  			 			});
    543. 

  543.  			 		}else if(startNum == 3){
    544. 

  544.  			 			g("milesPoint").innerHTML =3;
    545. 

  545.  			 			pointNum = 3;
    546. 

  546.  			 			loadImage(imgPath+"road3.jpg?201407110132",function(){
    547. 

  547.  			 				 	updateImgUrl(roadImgs,"./images/road3.jpg?201407110132");
    548. 

  548.  			 			});
    549. 

  549.  			 		}else if(startNum == 6){
    550. 

  550.  			 			g("milesPoint").innerHTML =4;
    551. 

  551.  			 			pointNum = 4;
    552. 

  552.  			 			loadImage(imgPath+"road4.jpg?201407110132",function(){
    553. 

  553.  			 				 	updateImgUrl(roadImgs,"./images/road4.jpg?201407110132");
    554. 

  554.  			 			});
    555. 

  555.  			 		}
    556. 

  556. 

  557. 

  558. 

  559.  			 		oilsModify("plus",startNum);	//减少油量
    560. 

  560.  			 		startNum++;
    561. 

  561.  			 		if(startNum == endNum){ 			//游戏结束后才操作	 
    562. 

  562.  			 			clearTimeout(endTimer);			
    563. 

  563.  			 			car.stops();
    564. 

  564. 	 			 		g('sharePage').style.display = "block";	//分享页面展现
    565. 

  565. 	 			 		car.clear();
    566. 

  566. 

  567. 	 			 		g("result").innerHTML = (car.miles/8000).toFixed(1);
    568. 

  568. 	 			 		kilo = (car.miles/8000).toFixed(1);
    569. 

  569. 	 			 		per = parseInt((car.miles/8000-92)/8);  per > 99? per = 99 : per;
    570. 

  570. 

  571. 	 			 		g("resultB").innerHTML = per;
    572. 

  572. 

  573. 			 			var propShows = document.querySelectorAll(".propShow");
    574. 

  574. 						for(var i=0; i<propShows.length; i++){
    575. 

  575. 							propShows[i].style.display = "none";
    576. 

  576. 						}
    577. 

  577.  			 			g("shareData").style.display = "block";
    578. 

  578. 

  579. 

  580. 	 			 		g("again").onclick = function(){	//重新游戏
    581. 

  581. 	 			 			// pgvSendClick({hottag:'a20140711modifyracing.btns.again'}); 
    582. 

  582. 	 			 			document.querySelector('.share').style.display = "none";
    583. 

  583. 	 			 			document.querySelector('.main').style.display = "block";
    584. 

  584. 	 			 			play();
    585. 

  585. 	 			 		}
    586. 

  586. 

  587. 

  588. 	 			 		g("share").onclick = function(){	//分享按钮
    589. 

  589. 	 			 			// pgvSendClick({hottag:'a20140711modifyracing.btns.share'}); 
    590. 

  590. 	 			 			g("shareTip").style.display = "block";
    591. 

  591. 	 			 			setTimeout(function(){
    592. 

  592. 	 			 				g("shareTip").style.display = "none";
    593. 

  593. 	 			 			},3000);
    594. 

  594. 	 			 		}
    595. 

  595. 	 			 		g("sharePage").onclick = function(e){
    596. 

  596. 	 			 			if(g("shareData").style.display == "none" && e.target.id !="share"&& e.target.id !="again"&& e.target.id !="btnDown"){
    597. 

  597. 	 			 				var propShows = document.querySelectorAll(".propShow");
    598. 

  598. 								for(var i=0; i<propShows.length; i++){
    599. 

  599. 									propShows[i].style.display = "none";
    600. 

  600. 								}
    601. 

  601. 		 			 			g("shareData").style.display = "block";
    602. 

  602. 	 			 			}
    603. 

  603. 	 			 		}
    604. 

  604. 

  605. 	 			 		// onBridgeReady();	//更新微信分享数据
    606. 

  606. 

  607. 	 			 		//分享展台初始化
    608. 

  608.  			 			var propShows = document.querySelectorAll(".propShow");
    609. 

  609. 						for(var i=0; i<propShows.length; i++){
    610. 

  610. 							propShows[i].style.display = "none";
    611. 

  611. 						}
    612. 

  612. 						var shareData = g("shareData");
    613. 

  613. 			 				shareData.style.display="block";
    614. 

  614. 

  615.  			 			}
    616. 

  616.  			 		
    617. 

  617.  			 		 //console.log(startNum);
    618. 

  618. 

  619.  			 	},3500);
    620. 

  620. 

  621.  			 }
    622. 

  622.  			 play();
    623. 

  623.  			 
    624. 

  624. 

  625.  			g("askPropbar").addEventListener('click', function(e){propDetail(e);}, false);
    626. 

  626. 		   
    627. 

  627. 		    var forever = false; //无敌状态
    628. 

  628. 		    var statusTimer = null;
    629. 

  629. 		    var tools = g("tools");
    630. 

  630. 		    var d = {};
    631. 

  631. 		    tools.addEventListener('touchstart', function(e){
    632. 

  632. 		    	var target = e.target;
    633. 

  633. 		    	if(target.tagName == "IMG"){
    634. 

  634. 		    		d.startY = e.touches[0].pageY;
    635. 

  635. 		    		d.startX = e.touches[0].pageX;
    636. 

  636. 		    		tools.addEventListener('touchmove', touchMove);
    637. 

  637. 					tools.addEventListener('touchend', touchEnd);
    638. 

  638. 		    	}
    639. 

  639. 		    	clearTimeout(statusTimer);
    640. 

  640. 		    	g("carStatus").style.opacity = 0;
    641. 

  641. 

  642. 		    	var targetNum = target.getAttribute("num");
    643. 

  643. 		    	// if(targetNum ==1){
    644. 

  644. 		    	// 	g("hours").style.webkitTransform = "scale(1.1)";
    645. 

  645. 		    	// }else if(targetNum ==2){
    646. 

  646. 		    	// 	g("miless").style.webkitTransform = "scale(1.1)";
    647. 

  647. 		    	// }else if(targetNum == 3){
    648. 

  648. 		    	// 	g("car").style.webkitTransform = "scale(1.1)";
    649. 

  649. 		    	// }else if(targetNum == 4){
    650. 

  650. 		    	// 	g("oils").style.webkitTransform = "scale(1.1)";
    651. 

  651. 		    	// }
    652. 

  652. 		    	
    653. 

  653. 		    	
    654. 

  654. 		    	
    655. 

  655. 

  656. 

  657. 			});
    658. 

  658. 			touchMove = function(e){
    659. 

  659. 				var target = e.target;
    660. 

  660. 				if(target.tagName == "IMG"){
    661. 

  661. 					d.disY = e.touches[0].pageY - d.startY;
    662. 

  662. 					d.disX = e.touches[0].pageX - d.startX;
    663. 

  663. 					if(Math.abs(d.dis / d.disY) > 0.5) {
    664. 

  664. 						e.stopPropagation();
    665. 

  665. 						e.preventDefault();
    666. 

  666. 					}
    667. 

  667. 					 target.style.webkitTransform = 'translate3d(' +d.disX + 'px,'+d.disY+'px,0)';
    668. 

  668. 				}
    669. 

  669. 			}
    670. 

  670. 			touchEnd = function(e){
    671. 

  671. 				var target = e.target;
    672. 

  672. 				//console.log(d.disY +"disY");
    673. 

  673. 				if(target.tagName == "IMG"){
    674. 

  674. 					target.style.webkitTransform = 'translate3d(' +0 + 'px,'+0+'px,0)';
    675. 

  675. 					if(d.disY > 20){
    676. 

  676. 						updateProp(target,pointNum);
    677. 

  677. 					}else if(d.disY < -20){
    678. 

  678. 						if(target.getAttribute("type") == 3){
    679. 

  679. 							forever = true;
    680. 

  680. 							g("carFeature").src = "./images/car-sep.png?201407110132";
    681. 

  681. 							setTimeout(function(){
    682. 

  682. 								g("carFeature").src = "./images/car.png?201407110132";
    683. 

  683. 								forever = false;
    684. 

  684. 							},3000);
    685. 

  685. 						}
    686. 

  686. 							if(!forever){
    687. 

  687. 								if(target.getAttribute("type") == 1){
    688. 

  688. 									//console.log(car.switchOver + " OVER");
    689. 

  689. 									car.up();
    690. 

  690. 									updateProp(target,pointNum);
    691. 

  691. 									clearTimeout(statusTimer);
    692. 

  692. 									g("carStatus").style.opacity = 1;
    693. 

  693. 									g("carText").innerHTML =  target.getAttribute("tip");
    694. 

  694. 

  695. 									//console.log(target);
    696. 

  696. 									statusTimer = setTimeout(function(){
    697. 

  697. 										g("carStatus").style.opacity = 0;
    698. 

  698. 									},3000);
    699. 

  699. 									g("carStatus").className = "car-laugh";
    700. 

  700. 

  701. 

  702. 								}
    703. 

  703. 								else{
    704. 

  704. 

  705. 									//console.log(car.switchOver + " OVER");
    706. 

  706. 									car.down();
    707. 

  707. 									updateProp(target,pointNum);
    708. 

  708. 									clearTimeout(statusTimer);
    709. 

  709. 									g("carStatus").style.opacity = 1;
    710. 

  710. 

  711. 									g("carText").innerHTML =  target.getAttribute("tip");
    712. 

  712. 

  713. 									statusTimer = setTimeout(function(){
    714. 

  714. 										g("carStatus").style.opacity = 0;
    715. 

  715. 									},3000);
    716. 

  716. 									g("carStatus").className = "car-cry";
    717. 

  717. 

  718. 

  719. 								}
    720. 

  720. 							}else{
    721. 

  721. 								if(target.getAttribute("type") == 1){
    722. 

  722. 									car.up();
    723. 

  723. 									updateProp(target,pointNum);
    724. 

  724. 									clearTimeout(statusTimer);
    725. 

  725. 									g("carStatus").style.opacity = 1;
    726. 

  726. 

  727. 									g("carText").innerHTML =  target.getAttribute("tip");
    728. 

  728. 

  729. 

  730. 									statusTimer = setTimeout(function(){
    731. 

  731. 										g("carStatus").style.opacity = 0;
    732. 

  732. 									},3000);
    733. 

  733. 									g("carStatus").className = "car-laugh";
    734. 

  734. 								}
    735. 

  735. 								else{
    736. 

  736. 									updateProp(target,pointNum);
    737. 

  737. 								}
    738. 

  738. 							}	
    739. 

  739. 					}
    740. 

  740. 				}
    741. 

  741. 				d = {};
    742. 

  742. 				// g("oils").style.webkitTransform = "scale(1)";
    743. 

  743. 		  //   	g("miless").style.webkitTransform = "scale(1)";
    744. 

  744. 		  //   	g("hours").style.webkitTransform = "scale(1)";
    745. 

  745. 		  //   	g("car").style.webkitTransform = "scale(1)";
    746. 

  746. 			}
    747. 

  747.  		}
    748. 

  748. }
    749. 

  749. 

  750. // loadjs("http://pingjs.qq.com/ping_tcss_ied.js",function(){
    751. 

  751. // 	if(typeof(pgvMain)=='function') pgvMain();
    752. 

  752. // },"");
    753. 

  753. 

  754. // var wxData = {
    755. 

  755. //     url : 'http://ttfc.qq.com/act/a20140711modifyracing/index.htm',
    756. 

  756. //     desc :"【天天飞车·全新超级配件版本上线】最炫科技风",
    757. 

  757. //     img_url :  "./images/wx.png?201407110132"
    758. 

  758. // }
    759. 

  759. 

  760. // function onBridgeReady() {
    761. 

  761. //     //转发朋友圈
    762. 

  762. //     WeixinJSBridge.on("menu:share:timeline", function(e) {
    763. 

  763. //         var data = {
    764. 

  764. //             img_url: wxData.img_url,
    765. 

  765. //             img_width: "120",
    766. 

  766. //             img_height: "120",
    767. 

  767. //             link: wxData.url,
    768. 

  768. //             desc:wxData.desc,
    769. 

  769. //             title: '我改装的赛车跑了'+kilo+'km,'+'打败了全国'+  (per > 99 ? 99 : per)+'%的人，期待在超级配件版本一展身手！'
    770. 

  770. 

  771. //         };
    772. 

  772. //         WeixinJSBridge.invoke("shareTimeline", data, function(res) {
    773. 

  773. //             WeixinJSBridge.log(res.err_msg)
    774. 

  774. //         });
    775. 

  775. //     });
    776. 

  776. //     //同步到微博
    777. 

  777. //     WeixinJSBridge.on("menu:share:weibo", function() {
    778. 

  778. //         WeixinJSBridge.invoke("shareWeibo", {
    779. 

  779. //             "content":'我改装的赛车跑了'+kilo+'km,'+'打败了全国'+  (per > 99 ? 99 : per)+'%的人，期待在超级配件版本一展身手！',
    780. 

  780. //             "url": wxData.url
    781. 

  781. //         }, function(res) {
    782. 

  782. //             WeixinJSBridge.log(res.err_msg);
    783. 

  783. //         });
    784. 

  784. //     });
    785. 

  785. //     //分享给朋友
    786. 

  786. //     WeixinJSBridge.on('menu:share:appmessage', function(argv) {
    787. 

  787. //         WeixinJSBridge.invoke("sendAppMessage", {
    788. 

  788. //             img_url: wxData.img_url,
    789. 

  789. //             img_width: "120",
    790. 

  790. //             img_height: "120",
    791. 

  791. //             link: wxData.url,
    792. 

  792. //             desc: wxData.desc,
    793. 

  793. //             title: wxData.title
    794. 

  794. //         }, function(res) {
    795. 

  795. //             WeixinJSBridge.log(res.err_msg)
    796. 

  796. //         });
    797. 

  797. //     });
    798. 

  798. // };
    799. 

  799. //执行
    800. 

  800. // try{
    801. 

  801. //     document.addEventListener('WeixinJSBridgeReady', function() {
    802. 

  802. //         onBridgeReady();
    803. 

  803. //         pgvSendClick({hottag:'a20140626painter.Navigator.wx'});
    804. 

  804. //     });
    805. 

  805. // }catch(e){}
    806. 

  806. </script>
    807. 

  807. </body>
    808. 

  808. </html><!--[if !IE]>|xGv00|aa21a07cb0dd37bee4a3a06215663032<![endif]-->
    809.