index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651
  1. <!DOCTYPE html>
  2. <html lang="en" class="no-js">
  3. <head>
  4. <meta http-equiv="Content-Script-Type" content="text/javascript">
  5. <meta http-equiv="Content-Style-Type" content="text/css">
  6. <meta charset="utf-8">
  7. <meta name="keywords"
  8. content="iPhone,Android,iPad,game,html5 game,puzzle game,puzzle,Puzzle,flick,card,postman,post,action,Flash,Flash for iPhone,html5,iPod touch,iPad">
  9. <!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
  10. <meta name="viewport"
  11. content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  12. <meta name="HandheldFriendly" content="true" />
  13. <meta name="apple-mobile-web-app-capable" content="yes">
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  15. <meta http-equiv="Pragma" content="no-cache">
  16. <meta http-equiv="Cache-Control" content="no-cache">
  17. <meta equiv="Expires" content="0">
  18. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  19. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  20. <script type="text/javascript">
  21. (function(){
  22. //updateShare(0);
  23. })();
  24. </script>
  25. <title>滑你妹</title>
  26. <style type="text/css">
  27. .ad-w {
  28. display: none;
  29. background-color: #323232;
  30. color: #fff;
  31. position: absolute;
  32. width: 100%;
  33. height: 80px;
  34. opacity: 0.8;
  35. z-index: 100;
  36. text-align: left;
  37. }
  38. .ad-w div{
  39. position: static;
  40. }
  41. .ad-top-w {
  42. top: 0;
  43. }
  44. .ad-bottom-w {
  45. bottom: 0;
  46. }
  47. .ad-w .des {
  48. float: left;
  49. font-size: 12px;
  50. padding-top: 15px;
  51. }
  52. .ad-w p.ad-title {
  53. font-size: 16px;
  54. }
  55. .ad-w p {
  56. line-height: 25px;
  57. margin: 0px;
  58. }
  59. .ad-w img {
  60. float: left;
  61. margin: 15px 3% 15px 3%;
  62. }
  63. .ad-w span {
  64. float: left;
  65. font-size: 12px;
  66. margin: 30px 0;
  67. }
  68. .ad-w a {
  69. border: 1px solid #fff;
  70. border-radius: 4px;
  71. color: #fff;
  72. height: 30px;
  73. width: 60px;
  74. float: right;
  75. line-height: 30px;
  76. text-align: center;
  77. margin: 25px 3% 0 3%;
  78. text-decoration: none;
  79. position: static;
  80. }
  81. .ad-w-f {
  82. display: none;
  83. position: absolute;
  84. width: 100%;
  85. height: 55px;
  86. z-index: 100;
  87. }
  88. .ad-top-w-f {
  89. top: 0;
  90. }
  91. .ad-bottom-w-f {
  92. bottom: 0;
  93. }
  94. #meiriq-share {
  95. display: none;
  96. }
  97. #meiriq-share #meiriq-share-mask{
  98. width: 100%;
  99. height: 100%;
  100. background: #0F0F0F;
  101. position: absolute;
  102. top: 0px;
  103. left: 0px;
  104. z-index: 105;
  105. opacity: 0.6;
  106. }
  107. #meiriq-share #meiriq-share-image img{
  108. position: absolute;
  109. width: 100%;
  110. top: 0px;
  111. right: 0px;
  112. }
  113. #tips{
  114. position: absolute;
  115. width: 100%;
  116. height: 40px;
  117. line-height: 40px;
  118. text-align: center;
  119. background-color: #323232;
  120. color: #FFF;
  121. z-index: 101;
  122. opacity: 0.7;
  123. }
  124. </style> <link rel="stylesheet" href="styles/main.css">
  125. <script>
  126. //
  127. clientgender = 'm';
  128. </script>
  129. <script src="scripts/createjs.js"></script>
  130. <style type="text/css">
  131. /*html{
  132. max-width: 600px;
  133. position: absolute;
  134. max-height: 100%;
  135. }*/
  136. @media screen and (min-width:320px) and (max-width:400px){
  137. .showres{
  138. font-size: .8em !important;
  139. }
  140. .tofriend{
  141. font-size: .8em !important;
  142. }
  143. .toagain{
  144. font-size: .8em !important;
  145. }
  146. }
  147. body{
  148. /*max-width: 600px;*/
  149. position: absolute;
  150. width: 100%;
  151. height: 100%;
  152. margin: 0;
  153. -webkit-user-select: none;
  154. /*background-color: #000;*/
  155. }
  156. .bodybg{
  157. /*background: url(images/home.png) center center;*/
  158. background-size: 100%;
  159. }
  160. img, ul, li, a{
  161. display: block;
  162. }
  163. .start, .game, .result, .wxWindow{
  164. position: absolute;
  165. width: 100%;
  166. min-height: 100%;
  167. /*-webkit-transition: all .6s ease;*/
  168. z-index: 1;
  169. /*background-color: rgba(0,0,0,.6);*/
  170. }
  171. a{
  172. position: absolute;
  173. width: 100%;
  174. height: 100%;
  175. top: 0;
  176. }
  177. .hide {
  178. visibility: hidden;
  179. /*display: none;*/
  180. /*top: 0%;*/
  181. overflow: hidden;
  182. /*width: 0;*/
  183. /*height: 100%;*/
  184. min-height: 100% !important;
  185. max-height: 100% !important;
  186. z-index: 0 !important;
  187. }
  188. .body{
  189. position: relative;
  190. width: 100%;
  191. height: 100%;
  192. /*max-width: 500px;*/
  193. margin: 0 auto;
  194. }
  195. .bg1 {
  196. background: url(images/bg-1.png) center bottom;
  197. background-size: 100%;
  198. }
  199. .bg2 {
  200. background: url(images/bg-2.png) center bottom;
  201. background-size: 100%;
  202. }
  203. /*开始页面的设置*/
  204. .start{
  205. width: 100%;
  206. height: 100%;
  207. background: url(images/home.png) center center;
  208. background-size: 100%;
  209. }
  210. .help{
  211. position: absolute;
  212. left: 25%;
  213. /*bottom: 28%;*/
  214. bottom: 37%;
  215. width: 50%;
  216. }
  217. .help img{
  218. /*width: 100%;*/
  219. width: 70%;
  220. margin-left: 15%;
  221. position:relative;
  222. top:10px;
  223. }
  224. .help .finger{
  225. position: absolute;
  226. left: 20%;
  227. height: 100%;
  228. width: 30%;
  229. top: 0;
  230. /*更改手指*/
  231. background: url(images/finger.png) center center no-repeat;
  232. background-size: 70% auto;
  233. -webkit-animation: flash 2s infinite linear;
  234. }
  235. @-webkit-keyframes flash {
  236. 0% { -webkit-transform: translate3d(0, -10%, 0); opacity: 1;}
  237. 50% { -webkit-transform: translate3d(100%, -10%, 0); opacity: 0; }
  238. 51% { -webkit-transform: translate3d(0%, 56%, 0); opacity: 1;}
  239. 100% { -webkit-transform: translate3d(100%, 56%, 0); opacity: 0;}
  240. }
  241. .start .btn{
  242. position: absolute;
  243. width: 50%;
  244. left: 25%;
  245. bottom: 15%;
  246. }
  247. .start .btnmore{
  248. position: absolute;
  249. width: 50%;
  250. left: 25%;
  251. bottom: 3%;
  252. }
  253. #game2{
  254. width: 100%;
  255. height: 100%;
  256. /*background: url(images/bg-5.jpg) center bottom;
  257. background-size: 100%;*/
  258. }
  259. .game .title{
  260. position: absolute;
  261. top:0;
  262. width: 100%;
  263. }
  264. .game .title .time{
  265. font-size: 2.5em;
  266. color: #fff;
  267. position: absolute;
  268. left: 50%;
  269. margin-left: -0.5em;
  270. }
  271. .game .title .score{
  272. top: 30%;
  273. left: 78%;
  274. width: 20%;
  275. text-align: center;
  276. display: block;
  277. position: absolute;
  278. }
  279. .result{
  280. width: 100%;
  281. height: 100%;
  282. /* background: url(images/r-bg.png) center top;*/
  283. background-size: 100%;
  284. color: #fff;
  285. /*font-weight: bold;*/
  286. }
  287. .result .btn{
  288. position: absolute;
  289. width: 80%;
  290. top: 63%;
  291. left: 10%;
  292. z-index: 10;
  293. }
  294. .win .btn{}
  295. .lose .btn{
  296. top: 38%;
  297. }
  298. .result .btn>div{
  299. position: absolute;
  300. top: 0;
  301. height: 100%;
  302. width: 47%;
  303. z-index: 10;
  304. }
  305. .result .btn .b1{
  306. left: 0;
  307. }
  308. .result .btn .b2{
  309. right: 0;
  310. }
  311. .result .share-btn{
  312. position: absolute;
  313. width: 90%;
  314. bottom: 8%;
  315. height: auto;
  316. overflow: hidden;
  317. z-index: 10;
  318. /* -webkit-transform: translate3d(-100%, 0, 0); */
  319. /*-webkit-transition: all .6s ease;*/
  320. left: 5%;
  321. }
  322. .result .score{
  323. position: absolute;
  324. width: 100%;
  325. font-size: 2em;
  326. text-align: center;
  327. color: white;
  328. top: 24%;
  329. /*background: url(images/scorebg.png) center center;*/
  330. /*background-size: auto 100%;*/
  331. }
  332. .result .max-score{
  333. position: absolute;
  334. width: 100%;
  335. font-size: 1.2rem;
  336. text-align: center;
  337. color: white;
  338. /* top: 44%; */
  339. /* background: url(images/scorebg.png) center center; */
  340. /* background-size: auto 100%; */
  341. }
  342. .result .text{
  343. position: absolute;
  344. width: 85%;
  345. font-size: 1em;
  346. text-align: center;
  347. color: white;
  348. left: 10%;
  349. top: 51%;
  350. /*background: url(images/scorebg.png) center center;*/
  351. /*background-size: auto 100%;*/
  352. }
  353. .result .text2{
  354. position: absolute;
  355. width: 85%;
  356. font-size: .9em;
  357. text-align: center;
  358. color: white;
  359. left: 8%;
  360. bottom: 18%;
  361. /*background: url(images/scorebg.png) center center;*/
  362. /*background-size: auto 100%;*/
  363. }
  364. .result .score{
  365. position: absolute;
  366. width: 30%;
  367. left: 35%;
  368. font-size: 2em;
  369. text-align: center;
  370. color: white;
  371. top: 22%;
  372. /*background: url(images/scorebg.png) center center;*/
  373. /*background-size: auto 100%;*/
  374. }
  375. .result .scorebox{
  376. position: absolute;
  377. top: 0;
  378. width: 100%;
  379. height: 100%;
  380. display: -webkit-box;
  381. -webkit-box-orient: horizontal;
  382. -webkit-box-pack: center;
  383. -webkit-box-align: center;
  384. text-align: center;
  385. }
  386. .result .scorebox .title{
  387. width: 100%;
  388. -webkit-transform: translate3d(-100%, 0, 0);
  389. font-size: 1.2rem;
  390. }
  391. .result .scorebox .s{
  392. width: 100%;
  393. -webkit-transform: translate3d(-100%, 0, 0);
  394. }
  395. .win .share-btn{
  396. }
  397. .lose .share-btn{
  398. top: 48%;
  399. }
  400. .result .share-btn.act{
  401. -webkit-transform: translate3d(0, 0, 0);
  402. }
  403. .result .share-btn .sbtn{
  404. /*padding: 0 6%;*/
  405. display: -webkit-box;
  406. height: 100%;
  407. position: absolute;
  408. top: 0;
  409. width: 100%;
  410. box-sizing: border-box;
  411. z-index: 10;
  412. }
  413. .result .share-btn .b{
  414. -webkit-box-flex: 1;
  415. }
  416. .resulpanl{
  417. width: 77.5%;
  418. z-index: 10;
  419. height: 30.8%;
  420. margin-top: 50%;
  421. background: #fff;
  422. margin-left: 11.25%;
  423. border-radius: 10px;
  424. font-family: Microsoft Yahei;
  425. font-size: 1.2em;
  426. }
  427. .tellfriend{
  428. width: 100%;
  429. height: 100%;
  430. background: url(images/share1.png);
  431. background-size: 100%;
  432. color: #fff;
  433. display: none;
  434. z-index: 13;
  435. }
  436. .showres{
  437. display: block;
  438. height: 34%;
  439. /* width: 90%; */
  440. /* margin-left: 5%; */
  441. text-align: center;
  442. color: black;
  443. padding: 6%;
  444. font-size: 1.3em;
  445. padding-top: 10%;
  446. }
  447. .tofriend{
  448. margin-left: 6%;
  449. height: 28%;
  450. width: 40%;
  451. border-radius: 5px;
  452. border: 3px solid rgb(153,153,153);
  453. background: white;
  454. /* margin-top: 8%; */
  455. font-size: 1.3em;
  456. }
  457. .toagain{
  458. float: right;
  459. margin-right: 6%;
  460. width: 40%;
  461. height: 28%;
  462. border-radius: 5%;
  463. border: 3px solid rgb(153,153,153);
  464. /* margin-top: 8%; */
  465. font-size: 1.3em;
  466. background: rgb(255,255,255);
  467. border-radius: 5px;
  468. font-family: Microsoft Yahei;
  469. color: #999999;
  470. }
  471. .shareres{
  472. width: 100%;
  473. height: 100%;
  474. background: url(images/share1.png);
  475. /*background: url(images/r-bg.png) center top;*/
  476. background-size: 100%;
  477. color: #fff;
  478. /*font-weight: bold;*/
  479. }
  480. .shareresnormal{
  481. width: 100%;
  482. height: 100%;
  483. background: url(images/share2.png);
  484. /*background: url(images/r-bg.png) center top;*/
  485. background-size: 100%;
  486. color: #fff;
  487. /*font-weight: bold;*/
  488. }
  489. .shareback{
  490. margin-top: 95%;
  491. height: 6%;
  492. margin-left: 40%;
  493. width: 20%;
  494. font-size: 1.5em;
  495. background: transparent;
  496. border: none;
  497. }
  498. .toppanel{
  499. width: 30%;
  500. display: block;
  501. margin-top: 10%;
  502. }
  503. .toppanel>img{
  504. margin-top: 0.2em;
  505. position: absolute;
  506. left: 50%;
  507. margin-left: -70px;
  508. display: inline-block;
  509. }
  510. .toppanel>.time{
  511. }
  512. .boyplayer, .boyplayer>.tofriend{
  513. border: 3px solid rgb(0,176,239);
  514. color: rgb(0,176,239);
  515. }
  516. .girlplayer, .girlplayer>.tofriend{
  517. color: #ff8abe;
  518. border: 3px solid #ff8abe;
  519. }
  520. /*.loading {
  521. width: 15%;
  522. position: absolute;
  523. top: 50%;
  524. left: 42.5%;
  525. -webkit-animation: loading 3s infinite linear;
  526. }
  527. @-webkit-keyframes loading {
  528. from {
  529. -webkit-transform: rotate(0deg);
  530. }
  531. to {
  532. -webkit-transform: rotate(360deg);
  533. }
  534. }*/
  535. .hidden{
  536. opacity: 0;
  537. }
  538. </style>
  539. <script type="text/javascript">
  540. var _smq = _smq || [];
  541. _smq.push(['_setAccount', 'c9930ed8', new Date()]);
  542. _smq.push(['pageview']);
  543. var _gaq = _gaq || [];
  544. </script>
  545. <style type="text/css">
  546. #weixin-shade {
  547. font-size: 10px; position: fixed; top: 0;left: 0;width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 1000; overflow: auto;color:#fff; text-align: center; }
  548. #weixin-shade-scroll {position:absolute; top: 0;left: 0;width: 100%; height: 100%; overflow-y: auto;overflow-x: hidden;}
  549. #weixin-shade-qr div {font-size:2.4em; text-align: center; margin-top: 1em;}
  550. #weixin-shade-qr {}
  551. #weixin-shade-qr img {display: block; width: 50%; margin:2em auto;}
  552. #weixin-shade .step {}
  553. #weixin-shade .step .num{display: inline-block;margin:.5em auto; font-size: 3em; width: 1.5em; height: 1.5em; line-height: 1.5em; border-radius: 1em; background-color: #aaa; color: #000; }
  554. #weixin-shade .step div{font-size:2em;}
  555. #weixin-shade .step img{display: block; width: 70%; margin:2em auto;}
  556. </style>
  557. </head>
  558. <body class="" >
  559. <div class="body">
  560. <div class="start hide">
  561. <div class="help">
  562. <img src="images/help.png">
  563. <div class="finger"></div>
  564. </div>
  565. <img src="images/begin.png" class="btn" onclick="startbtn()"></img>
  566. </div>
  567. <div id="game2" class="game hide">
  568. <div class="title">
  569. <div class="toppanel">
  570. <img src="images/clock.png"/>
  571. <span class="time">9'99"</span>
  572. </div>
  573. </div>
  574. </div>
  575. <div class="result hide resultshow">
  576. <div class="resulpanl">
  577. <!-- <div> -->
  578. <span class="showres"></span>
  579. <!-- </div> -->
  580. <button class="tofriend" onclick="tellfriend()">右上方分享</button>
  581. <button class="toagain" onclick="restartbtn()">再玩一次</button>
  582. </div>
  583. <div class="tellfriend"></div>
  584. </div>
  585. <div class="sharepanel hide">
  586. <button class="shareback" onclick="shareback()"></button>
  587. </div>
  588. </div>
  589. <script src="scripts/main.js"></script>
  590. <script src="scripts/jquery.min.js"></script>
  591. <script src="scripts/common.js"></script>
  592. <div style="display: none;">
  593. </div>
  594. <script type="text/JavaScript">
  595. window.shareData={
  596. 'title':'划你妹',
  597. 'link':'http://game.ikongzhong.cn/games/hnm/',
  598. 'imgurl':'http://game.ikongzhong.cn/games/hnm/icon.png'
  599. }
  600. window.shareFriendData={
  601. 'title':'划你妹',
  602. 'content':'关注空中传媒网络,更多好玩的游戏等着你。',
  603. 'link':'http://game.ikongzhong.cn/games/hnm/',
  604. 'imgurl':'http://game.ikongzhong.cn/games/hnm/icon.png'
  605. }
  606. </script>
  607. <script type="text/JavaScript" src="http://gc.veiying.cn/code"></script>
  608. </body>
  609. </html>