Skip to content

Instantly share code, notes, and snippets.

@naoyeye

naoyeye/tga2014.html

Created November 18, 2014 09:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save naoyeye/b6415155cfb51a3a8db2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save naoyeye/b6415155cfb51a3a8db2 to your computer and use it in GitHub Desktop.
Download ZIP
TGA移动游戏大奖赛官网
Raw
tga2014.html
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="author" content="Tencent-TGideas">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>首页-TGA移动游戏大奖赛官网</title>
<!-- 设计：tuntundeng | 重构：brucewan | 创建：2014/03/11 | 更新：| 团队博客：http://tgideas.qq.com/ -->
<script>
var speedTest = {};
speedTest.start = new Date();
</script>
<style>
/* global */
html,body,ul{margin: 0;padding: 0;}
ul,ol{list-style: none;}
html,body,.wrap{width: 100%;height: 100%;overflow: hidden;-webkit-user-select: none}
body{background: -webkit-radial-gradient(50% 50%,rgba(255,255,255,0.5),rgba(100,80,200,0.2)), url(http://ossweb-img.qq.com/images/sy/tga/2014/online/bg-grid.png);font:12px/21px \5FAE\8F6F\96C5\9ED1;color: #33234f;}
a{color: #33234f;text-decoration: none;}
@font-face {font-family: 'icon';src: url('http://ossweb-img.qq.com/images/sy/tga/2014/online/icon.woff') format('woff'), url('http://ossweb-img.qq.com/images/sy/tga/2014/online/icon.ttf') format('truetype');}
[class^="icon-"]:before, [class*=" icon-"]:before {display: inline-block; width: 1em;margin-right: .2em;font-family: "icon";font-style: normal;font-weight: normal;text-align: center;speak: none;line-height: 1em; margin-left: .2em;}
.icon-ok-1:before { content: '\e800'; }
.icon-play:before { content: '\e80b'; }
.icon-cancel-1:before { content: '\e802'; }
.icon-cancel-circled-1:before { content: '\e803'; }
.icon-down-open:before { content: '\e807'; }
.icon-left-open:before { content: '\e808'; }
.icon-ok-circled-1:before { content: '\e801'; }
.icon-up-open:before { content: '\e80a'; }
.icon-down:before { content: '\e80c'; }
.icon-left:before { content: '\e80e'; }
.icon-right:before { content: '\e80f'; }
.icon-up:before { content: '\e810'; }
.icon-right-open:before { content: '\e809'; }
@-webkit-keyframes wave {100% { -webkit-transform: scaleX(1.5) scaleY(1.5);opacity: 0}}
@keyframes wave {100% {transform: scaleX(1.5) scaleY(1.5);opacity: 0}}
/* layout */
body{display:-webkit-box;display: box;-webkit-box-orient: vertical;box-orient: vertical;}
header{height: 50px;}
.content{display:-webkit-box;display: box;-webkit-box-orient: vertical;box-orient: vertical;-webkit-box-flex:1;box-flex:1;}
.tabs{-webkit-box-flex:1;box-flex:1;width: 100%;}
.triggers{width: 100%;height: 70px;}
/* head */
header{background: #443188;line-height: 50px;}
header .logo{float: left;height: 50px;margin-left: 10px;}
header .logo img{vertical-align: middle;}
header nav{float: right;}
header nav li{float: left;margin-right: 10px;position: relative;padding: 0 5px}
header nav li::after{content: '\e80b';display: inline-block;margin-left: 5px;font-size:12px;font-family: "icon";color: #fdc300;}
header nav a{color: #fff;font-size: 14px;}
/* games tab */
.tabs{position: relative;overflow: hidden;}
.tabs ul{position: absolute;width: 600%;height: 100%;}
.tabs li{float: left;width: 16.66%;height: 250px;position: relative;top: 50%;margin-top: -180px;}
.tabs .sprite{position: absolute;top: 0;left: 50%;-webkit-background-size: 250px 250px;background-size: 400px 800px;-webkit-backface-visibility:hidden;}
.tabs .name{position: absolute;top: 225px;width: 140px;left: 50%;margin-left: -70px;text-align: center;line-height: 22px;}
.tabs .name::after{content: '\e809';display: inline-block;width: 22px;height: 22px;border-radius: 11px;margin-left: 5px;line-height: 22px;text-align: center;vertical-align: top;font-family: "icon";background-color: #05b1f1;color: #fff}
/* games index */
.tab0 .sprite{top: 130px;margin-left: -30px;width: 100px;height: 100px;background-image: url(http://ossweb-img.qq.com/images/sy/tga/2014/online/index-page0.png);-webkit-transition:all 500ms ease-out;-webkit-transform-origin:20px 20px;}
.tab0 .bg{width: 236px;height: 194px;top: 30px;margin-left: -118px;background-position: 0 0;-webkit-background-size: 300px 600px;
background-size: 300px 600px;}
.tab0 .sprite1{background-position: 0 -300px;opacity: 0;-webkit-transform: scaleX(5)) scaleY(5));-webkit-transition:all 500ms ease-out;}
.tab0 .sprite1.show{-webkit-transform: translate(-60px, -80px);transform: translate(-60px, -80px);opacity: 1;}
.tab0 .sprite2{background-position: -100px -300px;opacity: 0;-webkit-transform: scaleX(5)) scaleY(5));}
.tab0 .sprite2.show{-webkit-transform: translate(60px, -100px);transform: translate(60px, -100px);opacity: 1;}
.tab0 .sprite3{background-position: -200px -300px;opacity: 0;-webkit-transform: scaleX(5)) scaleY(5));}
.tab0 .sprite3.show{-webkit-transform: translate(-80px, 50px);transform: translate(-80px, 50px);opacity: 1;}
.tab0 .sprite4{background-position: -300px -300px;opacity: 0;-webkit-transform: scaleX(5)) scaleY(5));}
.tab0 .sprite4.show{-webkit-transform: translate(90px, 40px);transform: translate(90px, 40px);opacity: 1;}
.tab0 .sprite5{top: 30px;margin-left: -140px;width: 270px;height: 260px;background-position: 0 -450px;}
.tab0 .icon-play{position: absolute;top: 140px;left: 50%;}
.tab0 .icon-play::before{position: absolute;left: -25px;top: -25px;z-index: 2;width: 45px;height: 50px;padding-left: 5px;line-height: 50px;border-radius: 25px;margin: 0; background: #d54f87;font-size: 24px;color: #fff;}
.tab0 .icon-play .wave{content: '';position: absolute;left: -40px;top: -40px;width: 80px;height: 80px;border-radius: 40px;background-color: rgba(0,0,0,0.5);-webkit-animation: wave 2.0s infinite linear;animation: wave 2.0s infinite linear;-webkit-transform-origin:center center;transform-origin:center center;}
.tab0 .tips{position: absolute;top: 215px;width: 130px;left: 50%;margin-left: -65px;text-align: center;}
.tab0 .tips::before{content: '\e808';display: inline-block;margin-right:5px;font-size:14px;font-family: "icon";color: #5f5295;}
/* games list*/
.tabs li:not(.tab0) .bg{width: 202px;height: 202px;top: 20px;margin-left: -101px;background-position: 0 0;}
.tabs li:not(.tab0) .sprite1{top: 50px;margin-left: -140px;width: 270px;height: 260px;background-position: 0 -450px;}
.tabs li:not(.tab0) .sprite2{top: 130px;margin-left: -30px;width: 120px;height: 100px;background-position: 0 -300px;opacity: 0;-webkit-transition:all 500ms ease-out;}
.tabs li:not(.tab0) .sprite2.show{opacity: 1;}
.tabs .tab1 .sprite{background-image: url(http://ossweb-img.qq.com/images/sy/tga/2014/online/index-page1.png);}
.tabs .tab1 .sprite2.show{-webkit-transform: translate(90px, 60px);transform: translate(90px, 60px);}
.tabs .tab2 .sprite{background-image: url(http://ossweb-img.qq.com/images/sy/tga/2014/online/index-page2.png);}
.tabs .tab2 .sprite2.show{-webkit-transform: translate(-100px, -110px);transform: translate(-100px, -110px);}
.tabs .tab2 .name::after{background-color: #896dbf}
.tabs .tab3 .sprite{background-image: url(http://ossweb-img.qq.com/images/sy/tga/2014/online/index-page3.png);}
.tabs .tab3 .sprite1{background-position: 205px -450px;}
.tabs .tab3 .sprite2.show{-webkit-transform: translate(-100px, 40px);transform: translate(-100px, 40px);}
.tabs .tab3 .name::after{background-color: #896dbf}
.tabs .tab4 .sprite{background-image: url(http://ossweb-img.qq.com/images/sy/tga/2014/online/index-page4.png);}
.tabs .tab4 .sprite1{background-position: 24px -450px;}
.tabs .tab4 .sprite2.show{-webkit-transform: translate(-100px, 50px);transform: translate(-100px, 50px);}
.tabs .tab4 .name::after{background-color: #896dbf}
.tabs .tab5 .sprite{background-image: url(http://ossweb-img.qq.com/images/sy/tga/2014/online/index-page5.png);}
.tabs .tab5 .sprite1{background-position: 24px -450px;}
.tabs .tab5 .sprite2.show{-webkit-transform: translate(90px, -120px);transform: translate(90px, -120px);}
.tabs .tab5 .name::after{background-color: #03ccce}
/* games tab triggers */
.triggers ul{width: 100%;text-align: center;}
.triggers li{position: relative;display: inline-block;width: 55px;padding-top: 45px;overflow: hidden;vertical-align: top;}
.triggers li:first-child{display: none;}
.triggers li:nth-child(3){width: 60px;}
.triggers li:last-child{width: 75px;}
.triggers li::after{content:'';position: absolute;left: 50%;top: 0;width: 50px;height: 50px;margin-left: -25px;background: url(http://ossweb-img.qq.com/images/sy/tga/2014/online/index-public.png) 0 0;-webkit-background-size: 250px 250px;background-size: 250px 250px;}
.triggers .icon2::after{background-position: -50px 0;}
.triggers .icon3::after{background-position: -100px 0;}
.triggers .icon4::after{background-position: -150px 0;}
.triggers .icon5::after{background-position: -197px 0;}
.triggers .icon::after{-webkit-filter:blur(1px);opacity: 0.5}
.triggers .current::after{-webkit-filter:none;opacity: 1}
/* pop */
.pop{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1000;}
.pop::before{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;background: rgba(0,0,0,0.5);}
.pop-content{position: absolute;z-index: 2;left: 50%;top: 20px;width: 90%;border-radius: 5px; margin-left: -45%;background-color: #fff;}
.pop-bd{padding: 30px 30px 20px;text-align: center;}
.pop-bd h3{margin-bottom: 10px;font-weight: normal;font-size: 30px;}
.pop-bd h3::before{width: 30px;height: 30px;border-radius: 15px;background-color: #0abe64;color: #fff;line-height: 30px;text-align: center;font-size: 20px;vertical-align: middle;margin-top: -5px;}
.pop-ft{display: -webkit-box;display: box;height: 40px;border-top: 1px solid #eee;}
.pop-ft input{display: block;-webkit-appearance:none;-webkit-box-flex: 1;box-flex: 1;border: 0 none;background: transparent;color: #149fff;font-size: 16px;}
.pop-ft input:last-child{border-left: 1px solid #eee;}
</style>
</head>
<body>
<header>
<a href="#" class="logo"><img src="http://ossweb-img.qq.com/images/sy/tga/2014/logo.png" width="60" alt="tga移动游戏"></a>
<nav>
<ul>
<li><a href="http://sy.qq.com/tga/2014/college/">校园争霸赛</a></li>
<li><a href="http://sy.qq.com/tga/2014/city/m/index.htm">城市拉力赛</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="tabs" id="scene">
<ul>
<li class="tab0">
<div class="layer" data-depth="0.5"><div class="bg sprite"></div><a href="#" class="icon-play"><span class="wave"></span></a></div>
<div class="layer" data-depth="0.75"><div class="sprite5 sprite"></div></div>
<div class="layer" data-depth="1"><div class="sprite1 sprite"></div><div class="sprite2 sprite"></div><div class="sprite3 sprite"></div><div class="sprite4 sprite"></div></div>
<div class="tips">向左滑动屏幕</div>
</li>
<li class="tab1">
<div class="layer" data-depth="0.5"><div class="bg sprite"></div></div>
<div class="layer" data-depth="0.75"><div class="sprite1 sprite"></div></div>
<div class="layer" data-depth="1"><div class="sprite2 sprite"></div></div>
<div class="name">天天酷跑</div>
</li>
<li class="tab2">
<div class="layer" data-depth="0.5"><div class="bg sprite"></div></div>
<div class="layer" data-depth="0.75"><div class="sprite1 sprite"></div></div>
<div class="layer" data-depth="1"><div class="sprite2 sprite"></div></div>
<div class="name">天天爱消除</div>
</li>
<li class="tab3">
<div class="layer" data-depth="0.5"><div class="bg sprite"></div></div>
<div class="layer" data-depth="0.75"><div class="sprite1 sprite"></div></div>
<div class="layer" data-depth="1"><div class="sprite2 sprite"></div></div>
<div class="name">天天飞车</div>
</li>
<li class="tab4">
<div class="layer" data-depth="0.5"><div class="bg sprite"></div></div>
<div class="layer" data-depth="0.75"><div class="sprite1 sprite"></div></div>
<div class="layer" data-depth="1"><div class="sprite2 sprite"></div></div>
<div class="name">节奏大师</div>
</li>
<li class="tab5">
<div class="layer" data-depth="0.5"><div class="bg sprite"></div></div>
<div class="layer" data-depth="0.75"><div class="sprite1 sprite"></div></div>
<div class="layer" data-depth="1"><div class="sprite2 sprite"></div></div>
<div class="name">全民飞机大战</div>
</li>
</ul>
</div>
<nav class="triggers">
<ul>
<li>首页</li>
<li class="icon icon1">天天酷跑</li>
<li class="icon icon2">天天爱消除</li>
<li class="icon icon3">天天飞车</li>
<li class="icon icon4">节奏大师</li>
<li class="icon icon5">全民飞机大战</li>
</ul>
</nav>
</div>
<div id="mod_player" style="width: 0;height: 0;overflow: hidden;"></div>
<script>
// 数据监测
speedTest.report = Math.random() < 0.5;
document.addEventListener('DOMContentLoaded', function(){
if(speedTest.report){
speedTest.ready = new Date();
var url="http://isdspeed.qq.com/cgi-bin/r.cgi?flag1=7718&flag2=164&flag3=2&2="+(speedTest.ready-speedTest.start);
var imgSendTimePoint = new Image();
imgSendTimePoint.src=url;
}
}, false);
window.addEventListener('load', function(){
if(speedTest.report){
speedTest.loaded = new Date();
var url="http://isdspeed.qq.com/cgi-bin/r.cgi?flag1=7718&flag2=164&flag3=2&3="+(speedTest.loaded-speedTest.start);
var imgSendTimePoint = new Image();
imgSendTimePoint.src=url;
}
}, false);
if(speedTest.report){
speedTest.init = new Date();
var url="http://isdspeed.qq.com/cgi-bin/r.cgi?flag1=7718&flag2=164&flag3=2&4="+(speedTest.init-speedTest.start);
var imgSendTimePoint = new Image();
imgSendTimePoint.src=url;
}
</script>
<script src="http://ossweb-img.qq.com/images/sy/tga/2014/online/global.js"></script>
<script src="http://ossweb-img.qq.com/images/sy/tga/2014/online/parallax.js"></script>
<script>
// 隐藏地址栏
window.scrollTo(0,1);
var param = window.location.search;
gameTab = new m.Tab({
target: document.querySelectorAll('.tabs li'),
trigger: document.querySelectorAll('.triggers li'),
onchange: function(n){
pgvSendClick({hottag:'tga2014.mobile.homepage.slide.game' + n});
var sprites = this.target[n].querySelectorAll('.sprite');
for(var i = 0; i < sprites.length; i++) {
sprites[i].classList.add('show');
}
if(this.prevPage !== window.undefined) {
var sprites = this.target[this.prevPage].querySelectorAll('.sprite');
for(var i = 0; i < sprites.length; i++) {
sprites[i].classList.remove('show');
}
}
},
onclick: function(){
switch(this.current){
case 0:
// var video = new tvp.VideoInfo();
// video.setVid("t0127qw40sl");
// var player =new tvp.Player();
// player.create({
// width:480,
// height:360,
// video:video,
// modId:"mod_player", //mod_player是刚刚在页面添加的div容器
// autoplay:true,
// isHtml5UseUI:true
// });
pgvSendClick({hottag:'tga2014.mobile.homepage.video'});
window.open('http://ossweb-img.qq.com/images/sy/tga/2014/online/tga.mp4');
break;
case 1: window.location.href = 'online/pao.html' + param; break;
case 2: window.location.href = 'online/peng.html' + param; break;
case 3: window.location.href = 'online/ttfc.html' + param; break;
case 4: window.location.href = 'online/da.html' + param; break;
case 5: window.location.href = 'online/feiji.html' + param; break;
}
},
touchMove: true
});
// 数据监测
var triggers = document.querySelectorAll('.triggers li');
for(var i = 0; i < triggers.length; i++) {
(function(i){
triggers[i].addEventListener('click', function(){
pgvSendClick({hottag:'tga2014.mobile.homepage.slidebytrigger.game'+i});
})
})(i);
}
// 视差
var scene = document.getElementById('scene');
var parallax = new Parallax(scene, {
calibrateY: false
});
</script>
<script src="http://pingjs.qq.com/ping_tcss_ied.js"></script>
<script>if(typeof(pgvMain) == 'function') pgvMain();</script>
<!-- <link rel="stylesheet" href="http://imgcache.gtimg.cn/tencentvideo_v1/mobile/v2/style/play.css"> -->
<script>
function onBridgeReady() {
//转发朋友圈
WeixinJSBridge.on("menu:share:timeline", function(e) {
var url = 'http://sy.qq.com/tga/2014/game/index.htm';
var data = {
img_url: "http://ossweb-img.qq.com/images/sy/tga/2014/logo-wx.png",
img_width: "120",
img_height: "120",
link: url,
//desc这个属性要加上，虽然不会显示，但是不加暂时会导致无法转发至朋友圈，
desc: "“微运动”快乐进行时",
title: "快乐微运动-TGA移动游戏大奖赛"
};
WeixinJSBridge.invoke("shareTimeline", data, function(res) {
WeixinJSBridge.log(res.err_msg)
});
});
//同步到微博
WeixinJSBridge.on("menu:share:weibo", function() {
var url = 'http://sy.qq.com/tga/2014/game/index.htm';
WeixinJSBridge.invoke("shareWeibo", {
"content": "“微运动”快乐进行时",
"url": url
}, function(res) {
WeixinJSBridge.log(res.err_msg);
});
});
//分享给朋友
WeixinJSBridge.on('menu:share:appmessage', function(argv) {
var url = 'http://sy.qq.com/tga/2014/game/index.htm';
WeixinJSBridge.invoke("sendAppMessage", {
img_url: "http://ossweb-img.qq.com/images/sy/tga/2014/logo-wx.png",
img_width: "120",
img_height: "120",
link: url,
desc: "“微运动”快乐进行时",
title: "快乐微运动-TGA移动游戏大奖赛"
}, function(res) {
WeixinJSBridge.log(res.err_msg)
});
});
};
document.addEventListener('WeixinJSBridgeReady', function() {
onBridgeReady();
});
</script>
</body>
</html><!--[if !IE]>|xGv00|b20dfe764f48baa64496bbb6c085d96b<![endif]-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment