腾讯冒险岛2主页分析
腾讯冒险岛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" onclick="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、我可以从源代码视角直接看我自己写的界面，再去对比别人的页面，可能会有不同的收获
三、总结
版权声明：本文为Renyi-Fan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。