腾讯冒险岛2主页分析
2024-04-24 08:59:30
腾讯冒险岛2主页分析
一、截图
截图较大，请耐心等待
官网链接：
冒险岛2-官方网站-腾讯游戏-放想象去冒险！
http://mxd2.qq.com/?ADTAG=media.buy.baidukeyword.fppc_mxd2pc_u19850017.k37985416153.a18667728353
1、整体感觉：整个页面的整体感觉是Q萌和色彩鲜艳，适合小朋友
2、页面配色：整体配色为黄橙蓝红，都是亮色调，并且整个页面的总配色不多，大概才三种
3、图片选择：用的图片在页面中起非常重要的结果，用的好图的话整个界面的风格也会非常好
4、离前端非常精通还有路要走，他们这些其实只是更好的案例作品而已，如果水到渠成，这些都会很简单
二、代码
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="gb2312">
6 <meta name="baidu-site-verification" content="chUo5NXqY3" />
7 <meta name="robots" content="all">
8 <meta name="author" content="Tencent-TGideas">
9 <meta name="Copyright" content="Tencent">
10 <meta http-equiv="X-UA-Compatible" content="IE=edge">
11 <meta name="Keywords" content="冒险岛2,冒险岛2官网,冒险岛2官方网站,腾讯冒险岛2,腾讯冒险岛2官网,冒险岛2下载,冒险岛2活动,冒险岛,冒险岛第二部,冒险岛2客户端下载,方块网游,冒险岛2论坛,冒险岛2社区" />
12 <meta name="Description" content="《冒险岛2》官方网站，是腾讯旗下全新网游大作，延续了《冒险岛》的经典游戏品牌并融入沙盒玩法，是一款拥有萌爆的可爱画面、创新的房屋系统、自由丰富的DIY系统及多种小游戏玩法的休闲网游。" />
13 <script>
14 ! function(e) {
15 wideV = function() {
16 var n = e,
17 i = document,
18 o = i.documentElement,
19 t = i.getElementsByTagName("body")[0],
20 a = o.clientWidth || t.clientWidth || n.innerWidth ;
21 return a > 1518
22 }();
23 var n = [];
24 wideV ? (n.push("w1920")) : n.push("w1280");
25 var i = document.getElementsByTagName("html")[0];
26 i.className = n.join(" ");
27
28 }(window, void 0);
29
30 </script>
31 <title>冒险岛2-官方网站-腾讯游戏-放想象去冒险！</title>
32 <!--页面设计：小白 | 页面制作：小安 | 创建：2017-06-16 | 团队博客：http://tgideas.qq.com/ -->
33 <style>body,html{height: 100%}
34 body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin: 0}
35 body,button,input,select,textarea{font: 12px/1.5 tahoma, "\5FAE\8F6F\96C5\9ED1", sans-serif}
36 h1,h2,h3,h4,h5,h6{font-size: 100%}
37 em,b{font-style: normal}
38 a{text-decoration: none;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
39 a:hover{text-decoration: underline}
40 img{border: 0;vertical-align: bottom;}
41 button,input,select,textarea{font-size: 100%;outline: none}
42 table{border-collapse: collapse;border-spacing: 0}
43 td,th,ul,ol{padding: 0}
44 ul,ol{list-style: none;}
45 body{padding-top: 42px;min-width: 1200px;background: #000;/*opacity: 0;transition: all ease-in-out .3s;*/}
46 a,a:hover{text-decoration: none;}
47 a:focus{outline: 0}
48 .cf{*zoom: 1;}
49 .cf:after{content: "";display: block;height: 0;clear: both;overflow: hidden;}
50 .clear{clear: both;height: 0px;overflow: hidden;}
51 .hide{display: none}
52 .ishow{display: block !important}
53 .ht{text-indent: -9999px;overflow: hidden}
54 .ie-tips{position: absolute;left: 0;top: 0;width: 100%;height: 50px;background: rgb(255, 255, 233);color: rgb(30, 84, 148);border-bottom: 1px solid rgb(230, 230, 198);text-align: center;line-height: 50px;font-size: 12px;}
55 .inner-cont{width: 1200px;margin: 0 auto;}
56 /*footer*/.tglogo,.nxlogo{background: url(//game.gtimg.cn/images/mxd2/web20160301/main/logo.png) no-repeat;}
57 .g-footer{background: #f8f8f8;}
58 .footer-con{position: relative;padding: 20px 0px 20px 330px;margin: 0 auto;width: 640px;font: 12px/22px "\5FAE\8F6F\96C5\9ED1";color: #000;}
59 .footer-con a{color: #000;font-size: 12px;}
60 .footer-con a:hover{color: #000}
61 .footer-link a{float: left;_display: inline;}
62 .footer-link span{float: left;_display: inline;margin: 0 3px;font-family: "tahoma"}
63 .footer-con .copyright{float: right;}
64 .f-logo{position: absolute;left: 0;top: 30px;}
65 .tglogo,.nxlogo{display: inline-block;*display: inline;*zoom: 1;font-size: 0;line-height: 120px;width: 190px;height: 45px;overflow: hidden;}
66 .tglogo{background-position: 0 -132px}
67 .nxlogo{background-position: 0 -180px}
68 .footer-con .m span{margin: 0 6px;}
69 .g-footer{background: #000}
70 .footer-con,.footer-con a{color: #5d5d5d}
71 /*footer end*/.top-menu{position: absolute;top: 42px;left: 0;width: 100%;height: 80px;z-index: 999;background: #1e1e1e}
72 .g-header-fixed{position: fixed;top: 0;}
73 .nav-l{position: absolute;left: 0;top: 0;height: 80px;line-height: 80px;color: #fff;}
74 .logo{float: left;background: url(https://game.gtimg.cn/images/mxd2/web201707/cs20171024/spr.png) no-repeat 0 0;width: 96px;height: 55px;overflow: hidden;margin: 12px 0 0 45px;}
75 .logo a{display: block;width: 100%;height: 100%;text-indent: -9999px;oveflow: hidden;}
76 .menu-box{float: left;_display: inline;margin-left: 25px;}
77 .menu-box a{color: #fff;font-size: 14px;padding: 0 20px;}
78 .enter-box-r{position: absolute;right: 0;top: 0;height: 80px;}
79 .enter-box-r a{position: relative;height: 80px;line-height: 80px;float: left;width: 125px;color: #fff;font-size: 20px;font-weight: bold;padding-left: 75px;}
80 .enter-box-r .link-icon{position: absolute;left: 40px;top: 30px;width: 24px;height: 22px;background: url(https://game.gtimg.cn/images/mxd2/web201707/cs20171024/spr.png) no-repeat;}
81 .enter-box-r .link-icon-1{background-position: -98px 0}
82 .enter-box-r .link-icon-2{background-position: -98px -26px;}
83 .enter-box-r .link-icon-3{background-position: -98px -57px;}
84 .enter-box-r .enter-link{background: #327aef}
85 .enter-box-r .enter-link:hover{background: #0652cc}
86 .enter-box-r .down-link{background: #ffa800}
87 .enter-box-r .down-link:hover{background: #ff9600}
88 .kv-b-bg{position: absolute;bottom: 0;left: 0;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/kv-b-bg.png) no-repeat;width: 1920px;height: 291px;z-index: 4;}
89 .slogan{position: absolute;left: 325px;bottom: 160px;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/slogan-txt.png) no-repeat left top;width: 650px;height: 214px;}
90 .video-play{position: absolute;top: 516px;left: 50%;width: 65px;height: 65px;background: url(http://ossweb-img.qq.com/images/mxd2/web201707/play1.png) no-repeat;text-indent: -999px;overflow: hidden;z-index: 111;margin-left: 231px;display: none;}
91 .slogan .slogan-link{position: absolute;bottom: 0;left: 0;width: 530px;height: 214px;text-indent: -999px;overflow: hidden;background: url(https://game.gtimg.cn/images/mxd2/web201707/cs20171024/slogan-txt.png) no-repeat -999px -999px;}
92 .mouse-icon{position: absolute;bottom: 55px;left: 50%;margin-left: -40px;display: block;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/mouse-icon.png) no-repeat;width: 80px;height: 75px;}
93 .da-img-box{width: 1070px;height: 227px;margin: 0 auto;overflow: hidden;}
94 .da-img-box a{float: left;margin: 0 8px;}
95 .video-bg-box{position: absolute;top: 0;left: 50%;width: 1920px;height: 100%;margin-left: -960px;}
96 .video-inner{position: absolute;top: 0;left: 0;z-index: 2;}
97 .video-warp{position: relative;height: 611px;overflow: hidden;width: 100%;}
98 .video-bg-img{background: url(//ossweb-img.qq.com/images/mxd2/web201707/index_kv0426.jpg) no-repeat top center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 3;max-height: 1109px;text-align: center;}
99 .btn-bbzt{display: block;background: url(//ossweb-img.qq.com/images/mxd2/web201707/index_slogan0426.png) no-repeat top center;background-size: 100%;color: #fff;width: 780px;height: 380px;position: absolute;left: 50%;top: 180px;margin-left: -390px;font-size: 26px;text-align: center;letter-spacing: 2px;z-index: 6;}
100 .btn-ck{display: block;background: url(//ossweb-img.qq.com/images/mxd2/web201707/btn_ck0426.png) no-repeat center center;background-size: 100%;width: 275px;height: 80px;position: absolute;left: 50%;top: 510px;margin-left: -130px;z-index: 6;}
101 .btn-bbzt p{padding-top: 138px;font-weight: bold;display: none;}
102 .video-mask{position: absolute;top: 0;left: 0;width: 100%;z-index: 4;background: url(https://game.gtimg.cn/images/mxd2/web201707/cs20171024/mask.png) repeat;height: 100%;pointer-events: auto;}
103 .video-warp .inner-cont{position: relative;height: 924px;z-index: 9}
104 #player_box{display: none;position: relative;width: 900px;height: 600px;background: #000;}
105 .close-btn{position: absolute;right: -60px;top: 0;width: 60px;height: 60px;cursor: pointer;text-align: center;}
106 .close-btn span{position: relative;font: 500 60px/60px simsun;text-align: center;color: #fff;-webkit-transition: all .3s ease-out;transition: all .3s ease-out;cursor: pointer;}
107 .close-btn:hover span{-webkit-transform: rotate(180deg);transform: rotate(180deg)}
108 .act-list-warp{overflow: hidden;background: #ffc400;padding-bottom: 40px;}
109 .m-hd{position: relative;z-index: 3;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/m-hd.png) no-repeat center top;height: 45px;text-indent: -999px;overflow: hidden;margin-top: 50px;}
110 .m-hd-2{background-position: center -52px;}
111 .m-hd-3{background-position: center -102px;}
112 .vid-box-warp{overflow: hidden;height: 785px;background: #327aef url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/vid-box-bg.jpg) no-repeat center 50px;}
113 .ts-box{overflow: hidden;background: #ffc400;padding-bottom: 40px;}
114 /*轮播*/
115 .flexslider{position: relative;width: 1120px;height: 700px;margin: -50px auto 0;}
116 .slides:after{content: "\0020";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
117 .w4 .w3_tit{padding-bottom: 50px;}
118 .flex-prev{display: block;}
119 .flex-next{display: block;}
120 .flex-control-nav{width: 100%;height: 11px;position: absolute;z-index: 1;bottom: 0;text-align: center;}
121 .flex-control-nav li{display: inline-block;vertical-align: top;}
122 .flex-control-paging li a{display: inline-block;width: 28px;height: 26px;background: url(//game.gtimg.cn/images/mxd2/cp/a20170921main/allbg.png) no-repeat;background-position: 0 -320px;margin: 0 5px;vertical-align: top;overflow: hidden;text-indent: -9999px;}
123 .flex-control-paging li a:hover{background-position: -38px -320px;}
124 .flex-control-paging li a.flex-active{background-position: -38px -320px;}
125 a.flex-prev{background: url(//game.gtimg.cn/images/mxd2/cp/a20170921main/allbg.png) no-repeat;width: 102px;height: 102px;background-position: 0 0;display: block;position: absolute;top: 45%;left: -50px;z-index: 2;text-indent: -9999px;}
126 a.flex-next{background: url(//game.gtimg.cn/images/mxd2/cp/a20170921main/allbg.png) no-repeat;width: 102px;height: 102px;background-position: -145px 0;display: block;position: absolute;top: 45%;right: -50px;z-index: 2;text-indent: -9999px;}
127 .kv1{display: block;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/ts-img-1.jpg) center top no-repeat;width: 1120px;height: 680px;}
128 .kv2{display: block;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/ts-img-2.jpg) center top no-repeat;width: 1120px;height: 680px;}
129 .kv3{display: block;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/ts-img-3.jpg) center top no-repeat;width: 1120px;height: 680px;}
130 .kv4{display: block;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/ts-img-4.jpg) center top no-repeat;width: 1120px;height: 680px;}
131 .kv5{display: block;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/ts-img-5.jpg) center top no-repeat;width: 1120px;height: 680px;}
132 .j-vid-box{cursor: pointer;position: relative;border: 24px solid #ffc400;width: 670px;height: 376px;margin: 40px auto 0;background: #000;}
133 .j-vid-box .j-vid-icon{background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/j-vid-icon.png) no-repeat;width: 158px;height: 181px;position: absolute;top: 50%;left: 50%;margin: -90px 0 0 -79px;}
134 .vid-top-hd{text-align: center;margin: 40px 0 45px;}
135 .vid-top-hd a{position: relative;display: inline-block;*display: inline;*zoom: 1;width: 195px;height: 95px;padding: 15px 0 0 95px;margin: 0 20px;vertical-align: top;text-align: left;}
136 .vid-top-hd a:hover,.vid-top-hd a.active{background: #3b57a1}
137 .vid-top-hd p{font-size: 25px;font-weight: bold;color: #fff;line-height: 1.2}
138 .vid-top-hd span{display: block;font-size: 15px;color: #aab3d1;width: 138px;margin-top: 5px;}
139 .vid-top-hd .j-num-1,.vid-top-hd .j-num-2,.vid-top-hd .j-num-3,.vid-top-hd .j-num-4{position: absolute;left: 20px;top: 20px;background: url(//game.gtimg.cn/images/mxd2/web201707/cs20171024/j-num-icon.png) no-repeat;width: 61px;height: 91px;}
140 .vid-top-hd .j-num-1{background-position: 0 0}
141 .vid-top-hd .j-num-2{background-position: 0 -99px}
142 .vid-top-hd .j-num-3{background-position: 0 -201px}
143 .vid-top-hd .j-num-4{background-position: 0 -302px}
144 </style>
145 <script type="text/javascript">
146 (function () {
147 function b(a) {
148 if (window.sessionStorage) {
149 sessionStorage.setItem("channel", a);
150 } else {
151 var b = b || 0,
152 c = "";
153 0 != b && (c = new Date, c.setTime(c.getTime() + 1E3 * b), c = "; expires=" + c.toGMTString());
154 document.cookie = "channel=" + escape(a) + c + "; path=/"
155 }
156 }
157 var a = navigator.userAgent;
158 if (-1 != a.indexOf("iPhone") || -1 != a.indexOf("iPad") || -1 != a.indexOf("iPod") || -1 != a.indexOf("Android"))
159 a = document.referrer, -1 < a.indexOf("baidu.com") ? b("seo_baidu") : -1 < a.indexOf("sogou.com") ? b("seo_sogou") :
160 -1 < a.indexOf("sm.cn") ? b("seo_sm") : -1 < a.indexOf("so.com") ? b("seo_360") : -1 < a.indexOf("bing.com") ? b(
161 "seo_bing") : -1 < a.indexOf("google.com") && b("seo_google"),
162 self.location = "http://mxd2.qq.com/m/"
163 })();
164 </script>
165 </head>
166
167 <body>
168 <!--[if lt IE 7]>
169 <div class="ie-tips" >您使用的浏览器版本过低，可能会影响到您浏览本网页，建议您升级您的浏览器。</div>
170 <![endif]-->
171 <div class="top-menu" id="topBar">
172 <div class="nav-l">
173 <h1 class="logo">
174 <a href="//mxd2.qq.com/main.htm" onclick="pgvSendClick({hottag:'index20171024.menulink.logo'});">冒险岛2官方网站</a>
175 </h1>
176 <div class="menu-box">
177 <a href="https://pay.qq.com/ipay/index.shtml?c=mxdtlhb&aid=pay.paygame.mxdtlhb&ADTAG=pay.paygame.mxdtlhb.self" onclick="pgvSendClick({hottag:'index20171024.menulink.link1'});"
178 target="_blank">蘑菇币充值</a>
179 <a href="http://mxd2.qq.com/events.shtml" onclick="pgvSendClick({hottag:'index20171024.menulink.link2'});" target="_blank">活动中心</a>
180 <a href="http://mxd2.qq.com/cp/a20170823xszn/index.htm" onclick="pgvSendClick({hottag:'index20171024.menulink.link3'});"
181 target="_blank">新手指南</a>
182 <a href="http://mxd2.qq.com/webplat/info/news_version3/22354/22355/30645/30649/m18622/list_1.shtml" onclick="pgvSendClick({hottag:'index20171024.menulink.link4'});"
183 target="_blank">攻略中心</a>
184 <a href="http://mxd2.qq.com/exchange.shtml" onclick="pgvSendClick({hottag:'index20171024.menulink.link5'});" target="_blank">兑换中心</a>
185 <a href="http://mxd2.gamebbs.qq.com/forum.php" onclick="pgvSendClick({hottag:'index20171024.menulink.link6'});" target="_blank">官方论坛</a>
186 </div>
187 </div>
188 <div class="enter-box-r">
189 <a href="//mxd2.qq.com/main.htm" class="enter-link" onclick="pgvSendClick({hottag:'index20171024.mainbtn.link1'});">
190 <span class="link-icon link-icon-1"></span>进入官网</a>
191 <a href="" class="down-link" id="btnStart">
192 <span class="link-icon link-icon-3"></span>启动游戏</a>
193 <a href="//mxd2.qq.com/download.shtml" target="_blank" class="down-link" onclick="pgvSendClick({hottag:'index20171024.mainbtn.link2'});"
194 id="btnEnter">
195 <span class="link-icon link-icon-2"></span>游戏下载</a>
196 </div>
197 </div>
198 <div class="video-warp" id="videoWarp">
199 <div class="video-bg-img"></div>
200 </div>
201 <a href="http://mxd2.qq.com/cp/a20180413ver/index.shtml" class="btn-bbzt" target="_blank" onclick="pgvSendClick({hottag:'a20180413ver.index.index'});"></a>
202 <a href="http://mxd2.qq.com/cp/a20180413ver/index.shtml" class="btn-ck" target="_blank" onclick="pgvSendClick({hottag:'a20180413ver.index.index'});"></a>
203 <!--<a href="javascript:vplay('player','s0531jsnxx8');" class="video-play">查看视频</a>-->
204 <div class="act-list-warp">
205 <div class="inner-cont">
206 <div class="m-hd ">热门活动</div>
207 <div class="da-img-box" id="indexImgDa">
208 </div>
209 </div>
210 </div>
211 <div class="vid-box-warp">
212 <div class="inner-cont">
213 <div class="m-hd m-hd-2">精彩视频</div>
214 <div class="vid-bd">
215 <div class="vid-top-hd cf">
216 <a href="javascript:vplay('player', 'a054816y2gq');" class="active">
217 <span class="j-num-1"></span>
218 <p>新冒险·新春曲</p>
219 <span>2018开年钜献
220 <Br>天空堡垒启航</span>
221 </a>
222 <a href="javascript:vplay('player', 'd054959kjkh');">
223 <span class="j-num-2"></span>
224 <p>天空堡垒启航</p>
225 <span>五大势力登场！</span>
226 </a>
227 <!-- <a href="javascript:vplay('player', 's05490rlq8f');">
228 <span class="j-num-3"></span>
229 <p>设计工坊</p>
230 <span>造型师完美秀场
231 引领潮流时尚！</span>
232 </a> -->
233 <!-- <a href="javascript:vplay('player', 's05490rlq8f');">
234 <span class="j-num-4"></span>
235 <p>设计工坊</p>
236 <span>造型师完美秀场
237 引领潮流时尚！</span>
238 </a> -->
239 </div>
240 <div class="j-vid-box" onclick="vplay('player', 'a054816y2gq')">
241 <img src="http://ossweb-img.qq.com/images/mxd2/web201707/video-img-12073ss.jpg" alt="2018开年钜献 天空堡垒启航" width="670" height="376">
242 <span class="j-vid-icon"></span>
243 </div>
244 </div>
245 </div>
246 </div>
247 <div class="ts-box">
248 <div class="inner-cont">
249 <div class="m-hd m-hd-3">游戏特色</div>
250 <div class="ts-bd">
251 <div class="flexslider">
252 <ul class="slides">
253 <li class="lb_sizes">
254 <a href="http://mxd2.qq.com/cp/a20171129mxd/page2.html" target="_blank" class="kv2"></a>
255 </li>
256 <li class="lb_sizes">
257 <a href="http://mxd2.qq.com/cp/a20171129mxd/page5.html" target="_blank" class="kv3"></a>
258 </li>
259 <li class="lb_sizes">
260 <a href="http://mxd2.qq.com/cp/a20171129mxd/page5.html" target="_blank" class="kv4"></a>
261 </li>
262 <li class="lb_sizes">
263 <a href="http://mxd2.qq.com/act/a20170724ts/index.htm" target="_blank" class="kv5"></a>
264 </li>
265 <li class="lb_sizes">
266 <a href="http://mxd2.qq.com/cp/a20170824introduce/index.html" target="_blank" class="kv1"></a>
267 </li>
268 </ul>
269 </div>
270 </div>
271 </div>
272 </div>
273 <div class="footer">
274 <style type="text/css">
275 .foot_links{ width: 690px; white-space: nowrap;}
276 #gfooter {background-color:#fff;}
277 #gfooter .foot {width:1080px;margin:0 auto;}
278 #gfooter .foot a{color:#000}
279 #gfooter .foot_cpright {padding:20px 0;}
280 #gfooter .gfooter_selflogo {width:131px;width: 190px;height: 45px;background: url(//game.gtimg.cn/images/mxd2/web20160301/main/logo.png) no-repeat; background-position: 0 -180px;}
281 /* =====for mobile===== */
282 #afooter .foot{font-size: 12px;text-align: center;padding: 20px 0;background: #000;color: #aaa;}
283 #afooter .foot a{color: #aaa;text-decoration: none;}
284 </style>
285 <div id="gfooter" ams="22354/22355/35028/m14371" dark="0" ieg-logo="1">
286 <a target="_blank" href="javascript:void(0)" class="foot_left gfooter_selflogo nxlogo">NXLOGO</a>
287 </div>
288
289 <script src="//game.gtimg.cn/images/js/2018foot/foot.js"></script>
290
291 </div>
292 <div id="player_box" class="player-box">
293 <div onclick="vplay_close();" class="close-btn">
294 <span>×</span>
295 </div>
296 <div id="player"></div>
297 </div>
298 <script src="//game.gtimg.cn/images/js/jquery/jquery-1.11.1.min.js"></script>
299 <script>
300 //函数节流
301 function throttle(fn, ms, context) {
302 ms = ms || 150;
303 if (ms === -1) {
304 return (function () {
305 fn.apply(context || this, arguments);
306 });
307 }
308 var last = new Date().getTime(),
309 timer = null;
310 return (function () {
311 var now = new Date().getTime();
312 if (timer) {} else if (now - last > ms) {
313 last = now;
314 fn.apply(context || this, arguments);
315 } else {
316 timer = setTimeout(function () {
317 timer = null;
318 last = new Date().getTime();
319 fn.apply(context || this, arguments);
320 }, ms - (now - last));
321 }
322 });
323 };
324
325 $(function () {
326 $(window).scroll(function () {
327 var o = $(window).scrollTop(),
328 s = $("#topBar");
329 o >= 42 ? (s.addClass("g-header-fixed")) : (s.removeClass("g-header-fixed"));
330 });
331 // $.getScript("//ossweb-img.qq.com/images/spiderMediaData/mxd2_new/mediaURLData.js",function(){332 // var vidsrc = mediaURLData['2331'];
333 // $("#bgvideo").attr("src",vidsrc)
334 // })
335
336 //$("#videoWarp").height($(window).height()-42)
337 // var canvas = document.createElement("canvas");
338 // if ((/Trident\/7\./).test(navigator.userAgent) || !canvas.getContext) {339 // $(".mouse-icon").hide();
340 // } else {341 // var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
342 // if (gl && gl instanceof WebGLRenderingContext) {343 // $.getScript("//ossweb-img.qq.com/images/spiderMediaData/mxd2_new/mediaURLData.js", function () {344 // // var videoSrc = mediaURLData['2400'];
345 // var videoSrc = 'http://ossweb-img.qq.com/images/mxd2/cp/a20171129mxd/zk1129.mp4';
346 // video3dbg(videoSrc)
347 // //$("#bgvideo").attr("src",vidsrc)
348 // })
349 // } else {350 // $(".mouse-icon").hide()
351
352 // }
353 // }
354
355 var GetUrlParamByName = function (sName) {
356 if (window.self.location.search.indexOf(sName + "=") != -1) {
357 return window.self.location.href.split("?")[1].split(sName + "=")[1].split("&")[0];
358 } else {
359 return "";
360 }
361 };
362
363 var pt = GetUrlParamByName('pt');
364 if (pt.indexOf('nb') != -1) {
365 $("#btnEnter").hide();
366 $("#btnStart").show();
367 switch (pt.toLowerCase()) {
368 case 'nb.pubwin':
369 $("#btnStart").attr('data-pgv', 'start.pubwin');
370 $("#btnStart").attr('href', 'xshttpcmd://GAME3:109487');
371 break;
372 case 'nb.shunwang':
373 $("#btnStart").attr('data-pgv', 'start.shunwang');
374 $("#btnStart").attr('href', 'barclientview://-Package17611/');
375 break;
376 case 'nb.yiyou':
377 $("#btnStart").attr('data-pgv', 'start.yiyou');
378 $("#btnStart").attr('href',
379 'http://127.0.0.1:8059/3NfckmttO+b6nm/JqXmcMFR+0u7PR78+9IV6cWzblsr5RCG/1hw+Fu9zgU3RmAI2Qep7MizofQM=');
380 break;
381 case 'nb.fgz':
382 $("#btnStart").attr('data-pgv', 'start.fgz');
383 $("#btnStart").attr('href', 'GameRun://GameID=11587||||');
384 break;
385 case 'nb.yun':
386 $("#btnStart").attr('data-pgv', 'start.yun');
387 $("#btnStart").attr('href', 'cgm://gid=47047¶m=silent');
388 break;
389 case 'nb.sega':
390 $("#btnStart").attr('data-pgv', 'start.sega');
391 $("#btnStart").on("click", function () {
392 createimg('9012');
393 return false;
394 });
395 // $("#btnStart").attr('href', 'http://127.0.0.1:62947/start/9012/'+new Date().getTime());
396 break;
397 default:
398 $('#btnEnter').show()
399 $('#btnStart').hide();
400 break;
401 }
402 } else {
403 $('#btnEnter').show()
404 $('#btnStart').hide()
405 }
406
407 $(".enter-box-r").on("click", "a", function () {
408 var pgv = $(this).data().pgv;
409 pgvSendClick({
410 hottag: 'a20171206wb.' + pgv
411 });
412 })
413 //启动游戏
414 function createimg(v) {
415 var myimg = document.createElement("img");
416 var srcu = "http://127.0.0.1:62947/start/" + v + "/" + new Date().getTime();
417 myimg.src = srcu;
418 myimg.height = 0;
419 myimg.width = 0;
420 document.body.appendChild(myimg);
421 }
422
423 $(".footerTime").text(new Date().getFullYear());
424 $(window).on('resize', throttle(function () {
425 var ww = $(window).width();
426 w(ww)
427 }));
428 var ramdom = String(new Date()).split(":")[1];
429 $.getScript("//game.qq.com/time/qqadv/Info_new_15946.js?ran=" + ramdom, function () {
430 gg([{
431 sr: "19935,19936,19937",
432 id: "indexImgDa",
433 pvg: "index.img.da",
434 type: "img"
435 }]);
436 });
437 $.getScript("http://mxd2.qq.com/cp/a20170921main/js/jquery.flexslider-min.js", function () {
438 $(".flexslider").flexslider({
439 slideshowSpeed: 8000, //展示时间间隔ms
440 animationSpeed: 1000, //滚动时间ms
441 touch: true, //是否支持触屏滑动
442 slideshow: true,
443 animation: "slide",
444 pauseOnAction: false
445 });
446 })
447 $.getScript("//tajs.qq.com/stats?sId=54709507", function () {
448 $.getScript("//game.gtimg.cn/images/js/PTT/ping_tcss_tgideas_https_min.js", function () {
449 var setSite = { //设置网站属性
450 siteType: "os",
451 pageType: "index", //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN
452 pageName: "首页-PC", //必填项:页面中文名
453 osact: 0, //选填项:是否是官网专题(在官网运营的专题)boolean；默认是0；可以在链接上加入参数osact=1来灵活设置
454 ingame: 0, //选填项:是否投放在游戏APP内boolean；默认是0；可以在链接上加入参数ingame=1来灵活设置
455 stayTime: 1 //选填项:是否需要统计停留时长boolean；默认是1
456 }
457 if (typeof (pgvMain) == 'function') {
458 pgvMain();
459 };
460 });
461 });
462 $.getScript("//ossweb-img.qq.com/images/js/title.js", function () {
463 ostb_int();
464 });
465 });
466
467 //tab
468 $.fn.extend({
469 "tab": function (options) {
470 var defaults = {
471 model: "click",
472 hd: null,
473 bd: null,
474 hdActiveCls: 'active',
475 arrow: false,
476 arrowName: "arr",
477 fade: false
478 };
479 var options = $.extend(defaults, options);
480 return this.each(function () {
481 var $el = $(this);
482 $el.find(options.bd).not($el.find(options.bd).eq(0)).hide();
483 $el.on(options.model, options.hd, function () {
484 if ($(this).hasClass(options.hdActiveCls)) {
485 return false;
486 }
487 var idx = $(this).index();
488 $(this).addClass(options.hdActiveCls).siblings().removeClass(options.hdActiveCls);
489 if (options.fade == true) {
490 $el.find(options.bd).eq(idx).fadeIn().siblings(options.bd).hide();
491 } else {
492 $el.find(options.bd).eq(idx).show().siblings(options.bd).hide();
493 }
494 if (options.arrow == true) {
495 var thisL = $(this).position().left;
496 var thisMW = $(this).outerWidth(true);
497 var thisW = $(this).innerWidth();
498 var arrowW = $(options.arrowName).outerWidth();
499 $(options.arrowName).stop().animate({
500 "left": thisL
501 }, 200);
502 }
503 return false;
504 });
505 })
506 }
507 });
508
509
510 //广告
511 var gg = function (i) {
512 var m = function (i) {
513 var ai = {
514 box: $('#' + i.id),
515 sr: String(i.sr).split(","),
516 pos: oDaTaNew15946
517 },
518 type = i.type,
519 len = ai.sr.length,
520 pre = i.pvg,
521 u = '//ossweb-img.qq.com/upload/adw/';
522 if (type == "img") {
523 var l = [];
524 for (var i = 0; i < len; i++) {
525 try {
526 var c = ai.pos["pos" + ai.sr[i]];
527 l.push('<a target="_blank" οnclick="pgvSendClick({hottag:\'' + pre + (i + 1) + '\'});" href="' + c[1] +
528 '" title="' + decodeURIComponent(c[0]) + '"><img title="' + decodeURIComponent(c[0]) + '" src="' + u + c[2] +
529 '" \/></a>');
530 } catch (err) {}
531 }
532 ai.box.html(l.join(""))
533 }
534 };
535 return function (ad) {
536 for (var i = ad.length; i--;) {
537 m(ad[i])
538 }
539 }
540 }();
541
542 var showDialog;
543 var showLayer = function (pid) {
544 if (showDialog) {
545 showDialog.show({
546 id: pid + "_box",
547 bgcolor: "#000",
548 opacity: 80
549 })
550 } else {
551 $.getScript("//game.gtimg.cn/images/js/comm/showDialog.min.js", function () {
552 showDialog.show({
553 id: pid + "_box",
554 bgcolor: "#000",
555 opacity: 80
556 })
557 showPopFlg = 1;
558 //console.log(showDialog)
559
560 })
561 }
562 }
563
564 function video_play(vid) {
565 if (typeof (showDialog) == 'function') {
566 videoInit(vid)
567 } else {
568 $.getScript("https://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js", function () {
569 videoInit(vid)
570 })
571 }
572
573 function videoInit(vid) {
574 var player = new Txplayer({
575 containerId: 'player',
576 vid: vid,
577 width: '900',
578 height: '600',
579 autoplay: true
580 });
581 }
582 }
583
584
585 function vplay(pid, vid, auto) {
586 video_play(vid, auto, pid);
587 showLayer(pid);
588 }
589
590 function vplay_close() {
591 showDialog.hide();
592 document.getElementById("player").innerHTML = "";
593 }
594
595 function w(ww) {
596 if (ww < 1500) {
597 $("html").addClass("w1280");
598 } else if (ww >= 1500) {
599 $("html").removeClass("w1280");
600 }
601 }
602
603 function video3dbg(videoSrc) {
604 window.addEventListener("load", function () {
605 "use strict";
606
607 var w = 1920,
608 h = 924;
609 var maskFlag = 0;
610 //[prepare screen]
611 var renderer = new THREE.WebGLRenderer();
612 renderer.setSize(w, h);
613 var view = document.getElementById("view");
614 var videoWarp = document.getElementById("videoWarp");
615 view.appendChild(renderer.domElement);
616
617 //[prepare controllable camera]
618 var camera = new THREE.PerspectiveCamera(70, w / h, 1, 1000);
619 camera.position.set(0, 0, 0);
620 camera.up.set(0, 1, 0);
621 camera.lookAt(new THREE.Vector3(0, 0, -1));
622
623 var lon = 0;
624 var lat = 0;
625 var gyroMouse = function (ev) {
626 var mx = ev.movementX || ev.mozMovementX || ev.webkitMovementX || 0;
627 var my = ev.movementY || ev.mozMovementY || ev.webkitMovementY || 0;
628 // console.log(mx)
629
630 lat = Math.min(Math.max(-Math.PI / 9, lat - my * 0.005), Math.PI / 15);
631 //lon = lon - mx * 0.01;
632 lon = Math.min(Math.max(-Math.PI / 7, lon - mx * 0.01), Math.PI / 7);
633
634 // console.log(lat)
635 var rotm = new THREE.Quaternion().setFromEuler(
636 new THREE.Euler(lat, lon, 0, "YXZ"));
637 // console.log(rotm);
638 camera.quaternion.copy(rotm);
639 };
640 videoWarp.addEventListener("mousedown", function (ev) {
641 videoWarp.addEventListener("mousemove", gyroMouse, false);
642 }, false);
643 videoWarp.addEventListener("mouseup", function (ev) {
644 videoWarp.removeEventListener("mousemove", gyroMouse, false);
645 }, false);
646
647
648 //[panorama video texture]
649 // (download) curl -O http://threejs.org/examples/textures/pano.webm
650 var video = document.createElement("video");
651 video.src = videoSrc;
652 video.crossOrigin = "anonymous"; // required for run on file:/
653 video.autoplay = true;
654 video.loop = true;
655 var tex = new THREE.Texture(video);
656 var mat = new THREE.MeshBasicMaterial({
657 map: tex
658 });
659
660 //[panorama space matched with the style of panorama image]
661 // var geom = new THREE.SphereGeometry(500, 32, 32,0,1*Math.PI); // sphere type
662 var geom = new THREE.SphereGeometry(1000, 32, 32, 0, Math.PI, 0.5, 0.76 * Math.PI); // sphere type
663
664 // var geom = new THREE.SphereGeometry(
665 // 500, 64, 32, 0, 2*Math.PI, 0, 0.5*Math.PI); // dome type
666 //var geom = new THREE.CylinderGeometry(500, 500, 500, 64); // tube type
667 geom.applyMatrix(new THREE.Matrix4().makeScale(1, 1, -1)); //surface inside
668
669 var obj = new THREE.Mesh(geom, mat);
670
671 //[create scene]
672 var scene = new THREE.Scene();
673 scene.add(obj);
674
675 //[play animation]
676 var loop = function loop() {
677 //[important: video texture update]
678 if (maskFlag == 0) {
679 $(".video-bg-img").fadeOut("slow");
680
681 maskFlag = 1;
682 }
683 if (video.readyState === video.HAVE_ENOUGH_DATA) tex.needsUpdate = true;
684
685 requestAnimationFrame(loop);
686 renderer.clear();
687 renderer.render(scene, camera);
688 };
689 loop();
690 }, false);
691 }
692 </script>
693 </body>
694
695
696 </html>
697 <!--[if !IE]>|xGv00|01c8e09a9779b796b08f85ebbc88bd5f<![endif]-->1、整体感觉，有很多js代码，毕竟前端js肯定占很大成分
2、11行，meta的Keywords属性，
3、12行，meta的Description属性
4、32行，是腾讯前端的官方博客
5、298行，页面用了jquery，其实主流技术就这几种，我要多练习
6、我可以从源代码视角直接看我自己写的界面，再去对比别人的页面，可能会有不同的收获
三、总结
腾讯冒险岛2主页分析相关推荐
- 爱奇艺、优酷、腾讯视频竞品分析报告2016（一）
1 背景 1.1 行业背景 1.1.1 移动端网民规模过半,使用时长份额超PC端 2016年1月22日,中国互联网络信息中心 (CNNIC)发布第37次<中国互联网络发展状况统计报告>,报 ...
- 爱奇艺、优酷、腾讯视频竞品分析报告2016（二）
接上一篇<爱奇艺.优酷.腾讯视频竞品分析报告2016(一)> http://milkyqueen520.blog.51cto.com/11233158/1760192 2.4 产品设计与交 ...
- 腾讯WEB加速器 原理分析手记
[标 题]:腾讯WEB加速器原理分析手记 [作 者]:欧阳修子(linuxs) [时 间]:2007-06-27 [链 接]:[url]http://www.sg-zc.cn/vip/article. ...
- 爱奇艺视频与腾讯视频竞品分析
随着视频直播业的火爆,市场上视频直播的APP也层出不穷,这些APP主拼的内容和资源,更需进一步推动用户付费习惯的养成.从用户关注因素出发,以用户体验的多方面的校对市场上热门视频直播类APP进行对比分析 ...
- 线上协同办公之争：腾讯会议竞品分析
因为疫情的到来,越来越多的公司选择在线上协同办公,线上这么多协同办公软件,哪一款更适合你呢,以腾讯会议为例,一起来看看吧. 一.项目描述 1.1 竞品分析描述 分析在线办公市场和用户群体,了解用户需求 ...
- 阿里云以及腾讯云香港服务器分析
选择海外服务器有几个要求:对国内网络要快.网络延迟低.中国大陆优化线路. 一.阿里云和腾讯云对内地ping情况 以下测试均是路由追踪系统测试结果 通过对阿里云香港服务器测试和腾讯云香港服务器测试结果的 ...
- 腾讯云mysql全日制分析_腾讯云：MySQL数据库的高可用性分析
MySQL数据库是目前开源应用最大的关系型数据库,有海量的应用将数据存储在MySQL数据库中.存储数据的安全性和可靠性是生产数据库的关注重点.本文分析了目前采用较多的保障MySQL可用性方案. MyS ...
- 腾讯云TRTC常见问题分析
----Web篇 极其多坑,机器多兼容,我们已经弃用了,甚至有些现在没法用言语描述- 1.NotAllowedError: The request is not allowed by the user ...
- 流氓网站5599.net修改ie主页分析
HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run中有一项run=c:\windows\run.vbs,开机自起,可通过36 ...
最新文章
- linux驱动：i2c驱动（一）
- 【bzoj4698】[Sdoi2008] Sandy的卡片 后缀数组
- linux-``反引号
- 华为实验台ENSP安装与使用
- ionic 实现仿苹果手机通讯录搜索功能
- SQL Server分页查询方法整理
- float在python中的书写形式错误的是_在Python3.7.1中，编写简单的GAN时，“TypeError:”float“对象不能解释为整数”错误...
- python自带网页解析器_python 之网页解析器
- 破译密码、设计飞机和建设团队：Randy Shoup谈高绩效团队
- python 获取对象类型_python Class：获取对象类型
- java创建文件的路径_JAVA如何指定路径创建文件?
- 一次spinlock死锁故障的定位（太经典，收藏！）
- html字幕精灵图标,视频加字幕精灵
- 教子要过计算机考试吗,[教子有方]高考家长最容易陷入的十大志愿填报误区
- 有什么好用的财务分析软件？
- win10推送_微软 Win10 最稳版本 2004 正式版推送！最低配置要求汇总,全新 UI 虚拟桌面，支持几乎所有 CPU...
- 高质量＝高成本？优思学院告诉你并非必然！
- C#动态库封装(CH341\CP2112)
- 七夕情人节表白HTML前端代码
- Linux编程基础：1~6章实训编程题
热门文章
- ofo北京总部人去楼空,是资本寒冬还是冬眠?
- 三星t5 android,三星T5金属红版评测：熟悉的配方却不一样的味道!
- 安全威胁泛化倒逼数据保护技术革新
- ubuntu新建文件夹和文件命令
- java实现PDF模板替换
- python udp 丢包_TFTP 使用不关心丢包的 UDP 传输，它是怎么保证数据的完整性的？...
- 记一次ORA-24247: network access denied by access control list (ACL)
- ESP8266-Arduino编程实例-PAJ7620手势传感器驱动
- PHPCMS v9 文件后缀提取错误代码上传漏洞
- 日立HDS VM存储更换硬盘