index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta content="yes" name="apple-mobile-web-app-capable"/>
  7. <meta content="yes" name="apple-touch-fullscreen"/>
  8. <meta content="telephone=no" name="format-detection"/>
  9. <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  10. <title>长大后我就是你吗?</title>
  11. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  12. <script type="text/javascript" src="js/game.min.js"></script>
  13. <style type="text/css">
  14. body,html{ margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
  15. div{margin:0; padding:0; }
  16. .loading{ width:100%; height:100%; position:absolute;background: url(img/loading.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  17. .layer1{ display:none; width:100%; height:100%; position:absolute;background: url(img/bg1.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  18. .next1{position:relative; width:80%; height:7%; top:76%; }
  19. .tipmsg{position:relative; width:80%; height:4%; top:65%; text-align:center; color:Red; font-size:1em; }
  20. .layer2{display:none; width:100%; height:100%; position:absolute;background: url(img/bg2.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  21. .img_2_1{position:absolute; width:130px; height:130px; margin-left:-65px; top:17%; left:50%;border-radius: 50%;}
  22. .img_2_2{position:absolute; width:80%; height:6%; top:55%; left:10%;}
  23. .layer3{display:none; width:100%; height:100%; position:absolute;background: url(img/bg2.jpg) 0 0 no-repeat; background-size: 100% 100%;}
  24. .div_3_1{position:absolute; width:132px; height:132px; margin-top:-5px; margin-left:-70px; top:17%; left:50%;
  25. border: 4px solid #ecab18;
  26. border-right-color: #1ad280;
  27. border-bottom-color: #ecab18;
  28. border-radius: 50%;
  29. -webkit-transition: all .28s ease-in-out;
  30. -moz-transition: all .28s ease-in-out;
  31. transition: all .28s ease-in-out;
  32. overflow:hidden;
  33. }
  34. .txt_2_1{position:absolute; width:100%; height:4%; top:40%; text-align:center; font-size:1em; }
  35. .img_3_2{position:absolute; width:58%; height:37%; top:45%; left:21%;}
  36. .img_3_3{position:absolute; width:96%; height:7%; top:83%; left:2%;}
  37. .img_3_4{position:absolute; width:30%; height:8%; top:92%; left:12%; }
  38. .img_3_5{position:absolute; width:30%; height:8%; top:92%; left:50%; }
  39. /* */
  40. .shareinfo{ display:none; width:100%; height:100%; position:absolute;background: url(img/share.png) 0 0 no-repeat;
  41. background-size: 100% 100%; z-index:9999;filter:alpha(opacity=90);opacity:0.9; background-color:#404040;}
  42. .mimg1{position:absolute; width:10%; height:4.8%; top:0.5%; right:2%; z-index:999;}
  43. .mimg2{position:absolute; width:10%;height:4.8%; top:0.5%; right:2%; z-index:999;filter:alpha(opacity=50);opacity:0.5;}
  44. </style>
  45. </head>
  46. <body>
  47. <center>
  48. <img src="img/icon.png" style="position:absolute; margin-top:-2000px; margin-left:-2000px;" />
  49. <div id="loading" class="loading"></div>
  50. <img id="playmimg" src="img/musicbtn.png" class="mimg1" onclick="playm();"/>
  51. <div id="layer1" class="layer1">
  52. <div class="next1" id="img_uppt"></div>
  53. <div class="tipmsg"></div>
  54. <input type="file" id="i-file" name="files" onchange='onSelectPhoto(this.files);' style='visibility:hidden;' />
  55. <input type="hidden" id="hid_ptimgname" />
  56. <img id='preview_img' src="img/touxiang.png" style=" display:none "/>
  57. </div>
  58. <div id="layer2" class="layer2">
  59. <div class="div_3_1"></div>
  60. <img src="img/touxiang.png" class="img_2_1"/>
  61. <img src="img/ziti.png" class="img_2_2"/>
  62. </div>
  63. <div id="layer3" class="layer3">
  64. <img src="img/touxiang.png" class="img_2_1"/>
  65. <div id="txt_2_1" class="txt_2_1"></div>
  66. <img src="img/p/1.png" class="img_3_2"/>
  67. <img src="img/title.png" class="img_3_3"/>
  68. <a href="http://mp.weixin.qq.com/s?__biz=MzI4MjA2MjE0MQ==&mid=246005295&idx=1&sn=490f8141976d607ba079d48f52a3fcd7#rd"><img src="img/apply.png" class="img_3_4"/></a>
  69. <img src="img/sharebtn.png" class="img_3_5" onclick="fnshare();"/>
  70. </div>
  71. <div class="shareinfo" onclick="fnsharehidd();">
  72. </div>
  73. <div class="hide">
  74. <audio id="myAudio" loop="true"></audio>
  75. </div>
  76. </center>
  77. <script type="text/javascript">
  78. //var dh = $(document).height();
  79. //var dw = $(document).width();
  80. //var present = parseInt($(document).height()) / 960;
  81. //if (dw > parseInt(640 * present)) {
  82. // dw = parseInt(640 * present);
  83. //}
  84. //$("#loading").css("height", dh + "px");
  85. //$("#loading").css("width", dw + "px");
  86. //$("#layer1").css("height", dh + "px");
  87. //$("#layer1").css("width", dw + "px");
  88. //$("#layer2").css("height", dh + "px");
  89. //$("#layer2").css("width", dw + "px");
  90. //$("#layer3").css("height", dh + "px");
  91. //$("#layer3").css("width", dw + "px");
  92. function getrdm(Min, Max) {
  93. var Range = Max - Min;
  94. var Rand = Math.random();
  95. return (Min + Math.round(Rand * Range));
  96. }
  97. function funGame()
  98. {
  99. var ArrTxt =
  100. ["此人如此傲娇,传承了",
  101. "此人如此上档次,传承了",
  102. "此人这么相貌堂堂,传承了",
  103. "此人如此心机,传承了",
  104. "此人如此呆萌,传承了",
  105. "此人这么欢乐,传承了",
  106. "此人这么一表人才,传承了",
  107. "此人这么土豪,传承了",
  108. "此人如此吊丝,传承了",
  109. "此人如此低调,传承了",
  110. "此人这么矜持,传承了",
  111. "此人这么文艺,传承了"
  112. ];
  113. var rdm1 = getrdm(0, 11);
  114. var rdm2 = getrdm(1, 27);
  115. var txtInfo = ArrTxt[rdm1];
  116. var imgInfo = "img/p/"+rdm2+".png";
  117. $(".txt_2_1").html(txtInfo);
  118. $(".img_3_2").attr("src",imgInfo);
  119. // var pName = ["阿飞","赤丸","迪达拉","哈蟆吉","哈蟆龙","好色仙人自来也","BSD-九尾妖狐",
  120. // "绝","卡卡西","李洛克","我爱罗","君麻吕","BSD-幼少-鸣人","日向宁次","帕可","日向雏田",
  121. // "豚豚","蛤蟆文太","BSD-SD幼少我爱罗","BSD-SD幼少-小李","小樱","蝎","牙","伊鲁卡老师",
  122. // "BSD-SD幼少-伊鲁卡","宇智波鼬","佐助"];
  123. document.title = "原来我是这么正经靠谱的孩纸呢,看看你的未来呢!";
  124. }
  125. </script>
  126. <script type="text/javascript">
  127. var imgNum = 0;
  128. var images = [];
  129. preLoadImg();
  130. function preLoadImg() {
  131. images.push("img/loading.jpg");
  132. images.push("img/apply.png");
  133. images.push("img/bg1.jpg");
  134. images.push("img/bg2.jpg");
  135. //images.push("img/bg3.jpg");
  136. images.push("img/share.png");
  137. images.push("img/title.png");
  138. images.push("img/touxiang.png");
  139. images.push("img/ziti.png");
  140. images.push("img/p/1.png");
  141. images.push("img/p/2.png");
  142. images.push("img/p/3.png");
  143. images.push("img/p/4.png");
  144. images.push("img/p/5.png");
  145. images.push("img/p/6.png");
  146. images.push("img/p/7.png");
  147. images.push("img/p/8.png");
  148. images.push("img/p/9.png");
  149. images.push("img/p/10.png");
  150. images.push("img/p/11.png");
  151. images.push("img/p/12.png");
  152. images.push("img/p/13.png");
  153. images.push("img/p/14.png");
  154. images.push("img/p/15.png");
  155. images.push("img/p/16.png");
  156. images.push("img/p/17.png");
  157. images.push("img/p/18.png");
  158. images.push("img/p/19.png");
  159. images.push("img/p/20.png");
  160. images.push("img/p/21.png");
  161. images.push("img/p/22.png");
  162. images.push("img/p/23.png");
  163. images.push("img/p/24.png");
  164. images.push("img/p/25.png");
  165. images.push("img/p/26.png");
  166. images.push("img/p/27.png");
  167. $.imgpreload(images,
  168. {
  169. each: function() { },
  170. all: function() {
  171. $('#loading').hide();
  172. $(".layer1").show();
  173. initMusic();
  174. playMusic(true);
  175. }
  176. });
  177. }
  178. </script>
  179. <script type="text/javascript">
  180. var file_name = false;
  181. var file_obj = false;
  182. var uploading = false;
  183. var use_general_upload = false;
  184. var default_pic = 'img/touxiang.png';
  185. var loading_src = "img/loading.gif";
  186. var succ_jumpdirect = "";
  187. //var succ_defaulturl = "/usercp/myalbum.php?pin=84085299_0_1436852344_a2ce1d5b2874d2e9e6b6d308987e4aa3aa96fafb&v=6";
  188. function onSelectPhoto(files) {
  189. file_obj = files[0];
  190. if (use_general_upload) {
  191. return;
  192. }
  193. var filesize = file_obj.size < 120 || file_obj.size > 9242880;
  194. var allow_type = '|.jpg|.png|.gif|';
  195. var ext_name = '|' + file_obj.name.toLowerCase().substr(file_obj.name.length - 4) + '|';
  196. var filetype = (allow_type.indexOf(ext_name) == -1);
  197. var reader = new FileReader();
  198. reader.onload = function(e) {
  199. if (e.target.result.substr(0, 11) == 'data:base64') {
  200. //$("#preview_img").attr('src',
  201. // "data:application/octet-stream;"
  202. // + e.target.result.substr(e.target.result.indexOf("base64,")));
  203. $("#tipmsg").html("");
  204. }
  205. else {
  206. //$("#preview_img").attr('src', e.target.result);
  207. $("#tipmsg").html("");
  208. //upImage(e.target.result);
  209. $(".img_2_1").attr('src', e.target.result);
  210. $(".layer1").hide();
  211. $(".layer2").show();
  212. timer();
  213. }
  214. }
  215. if (filesize) {
  216. file_obj = false;
  217. $("#tipmsg").html("图片大小不得大于10M");
  218. //showTextTime("您选择的文件大于5MB,请选择小于5MB的照片", 3000);
  219. return false;
  220. }
  221. if (filetype) {
  222. file_obj = false;
  223. $("#tipmsg").html("文件格式只能为JPG、PNG或GIF");
  224. //showTextTime("您选择的文件格式有误,应为JPG、PNG或GIF类型的文件", 3000);
  225. return false;
  226. }
  227. file_name = file_obj.name;
  228. reader.readAsDataURL(file_obj);
  229. }
  230. $(function() {
  231. $("#preview_img,#img_uppt").click(function() {
  232. var e = document.getElementById("i-file");
  233. var ev = document.createEvent("MouseEvents");
  234. ev.initEvent("click", true, true);
  235. e.dispatchEvent(ev);
  236. });
  237. if (typeof FileReader === 'undefined' || typeof FormData === 'undefined') {
  238. $(".file_upload_con").attr("style", "margin-top:20px;");
  239. $("#i-file").attr("style", "");
  240. $(".jy-upload").addClass("dn");
  241. use_general_upload = true;
  242. }
  243. });
  244. var timeID;
  245. var times = 0;
  246. var t;
  247. var arotate = 1000;
  248. function timer() {
  249. timeID = setTimeout("timer()", 3000);
  250. if (parseInt(times) >0) {
  251. funGame();
  252. $(".layer2").hide();
  253. $(".layer3").show();
  254. clearTimeout(timeID);
  255. clearInterval(t);
  256. }
  257. else {
  258. times++;
  259. var t = setInterval
  260. (
  261. function(){
  262. arotate=parseInt(arotate)+1000;
  263. $(".div_3_1").css("transform","rotate("+arotate+"deg)");
  264. },300);
  265. }
  266. }
  267. function fnshare() {
  268. $(".shareinfo").show();
  269. }
  270. function fnsharehidd() {
  271. $(".shareinfo").hide();
  272. }
  273. var reclick = true;
  274. var isSuccess = false;
  275. var musicPlayStatus = true;
  276. var getById = function (id) {
  277. return document.getElementById(id);
  278. }
  279. var initMusic = function () {
  280. var audio = getById("myAudio");
  281. audio.src = "img/bg.mp3";
  282. }
  283. var playMusic = function (status) {
  284. var audio = getById("myAudio");
  285. if (status) {
  286. if (audio.paused) {
  287. audio.play();
  288. musicPlayStatus = true;
  289. }
  290. } else {
  291. if (!audio.paused) {
  292. audio.pause();
  293. musicPlayStatus = false;
  294. }
  295. }
  296. }
  297. function playm()
  298. {
  299. if($("#playmimg").attr("class")=="mimg1")
  300. {
  301. playMusic(false);
  302. $("#playmimg").attr("class","mimg2");
  303. }
  304. else
  305. {
  306. playMusic(true);
  307. $("#playmimg").attr("class","mimg1");
  308. }
  309. }
  310. </script>
  311. </body>
  312. </html>