以下是 腾讯互动娱乐网站jQuery特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>腾讯互动娱乐网站jQuery特效</title>
<link href="css/app.min.css" rel="stylesheet">
</head>
<body>
<div id="fullPage" class="show-a">
<div id="sideNav" class="side-nav side-nav-0">
<ul class="side-nav-ul">
<li class="side-nav-item side-nav-item-cur"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-home"></i>首页</a></li>
<li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-game"></i>游戏</a></li>
<li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-literature"></i>文学</a></li>
<li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-comic"></i>动漫</a></li>
<li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-film"></i>影视&戏剧</a></li>
<li class="side-nav-item"><a href="javascript:;" hidefocus="ture"><i class="s-icon s-icon-copyright"></i>版权&授权</a></li>
</ul>
</div>
<div id="scroller">
<div class="section screen" id="a">
<div class="layer bg bg-a" data-z="10"></div>
<div class="ani-wrap">
<span class="layer z5 sj-4 fadeInDown-3" data-z="9"></span>
<span class="layer z4 sj-3 fadeInDown-4" data-z="8"></span>
<!-- slogon拆分 -->
<span class="layer z6 slogon-1" data-z="1"><span class="slogon-1-in fadeInScale-1"></span></span>
<span class="layer z6 slogon-2" data-z="1"><span class="slogon-2-in fadeInScale-2"></span></span>
<span class="layer z6 slogon-3" data-z="1"><span class="slogon-3-in fadeInScale-3"></span></span>
<span class="layer z6 slogon-4" data-z="1"><span class="slogon-4-in fadeInScale-4"></span></span>
<span class="layer z6 slogon-5" data-z="1"><span class="slogon-5-in fadeInScale-5"></span></span>
<div class="hide">
<h2 class="hide">让想象绽放</h2>
<p class="hide">WE CREATE HAPPINESS</p>
</div>
<span class="layer z2 sj-2 fadeInDown-1" data-z="6"></span>
<span class="layer z1 sj-1 fadeInDown-2" data-z="8"></span>
</div>
<div class="info-wrap">
<div class="col adq1">
<a class="adq-pic" href="news-20140416-l.html"><img src="web201404/adq-1.png" alt=""></a>
<a class="adq-label" href="news-20140416-l.html">
<span class="adq-title">腾讯文学管理层首度亮相</span>
<span class="adq-summary">腾讯文学管理层首度亮相 吴文辉出任CEO</span>
</a>
</div>
<div class="col adq2">
<a class="adq-pic" href="news-20140416-m.html"><img src="web201404/adq-2.jpg" alt=""></a>
<a class="adq-label" href="news-20140416-m.html" id="headline">
<h3 class="title">腾讯互娱UP发布会</h3>
<p class="summary">适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</a>
</div>
<div class="news">
<div class="news-data">
<table cellspacing="0" class="news-table">
<tbody>
<tr>
<td class="news-point"><span class="point">.</span></td>
<td class="news-title">来源：<a href="#" target="_blank">程序员设计师联盟淘宝店</a></td>
<td class="news-date">09.22</td>
</tr>
<tr>
<td class="news-point"><span class="point">.</span></td>
<td class="news-title"><a href="news-20140805-n1.html">[公开课]探秘游戏方法论接受报名</a></td>
<td class="news-date">08.05</td>
</tr>
<tr>
<td class="news-point"><span class="point">.</span></td>
<td class="news-title"><a href="news-20140805-n2.html">“国漫神话”《尸兄》宣布手游授权 业内首个全产业IP诞生</a></td>
<td class="news-date">08.05</td>
</tr>
</tbody>
</table>
</div>
<a class="news-more" href="news.html">更多</a>
</div>
</div>
</div>
<div class="section screen" id="b">
<h3 class="hide">腾讯游戏</h3>
<span class="layer z10 lx-3" data-z="9"></span>
<span class="layer z10 lx-2" data-z="1"></span>
<span class="layer z10 lx-1" data-z="6"></span>
<img class="layer z1 b-title" data-z="2" src="web201404/title-b.png" width="288" height="111" alt="腾讯游戏">
<p class="layer z1 s-desc" data-z="5">全球排名第三的游戏开发和运营机构，也是国内最大的网络游戏社区。 腾讯游戏以“用心创造快乐”为理念，通过在多个游戏产品细分领域的耕耘，致力为玩家提供“值得信赖的”、“快乐的”和“专业的”互动游戏体验。<span class="s-link"><a href="#" target="_blank">13141618.taobao.com ></a></span></p>
<span class="layer z9 role-dzs" data-z="10"></span>
<span class="layer z8 mask-1" data-z="9"></span>
<span class="layer z7 role-x5" data-z="8"></span>
<span class="layer z5 role-lol" data-z="6"></span>
<span class="layer z4 role-cf" data-z="8"></span>
<span class="layer z3 mask-2" data-z="5"></span>
<span class="layer z3 role-kp" data-z="2"></span>
</div>
<div class="section screen" id="c">
<h3 class="hide">腾讯文学</h3>
<div class="layer bg bg-c" data-z="9"></div>
<img class="layer z8 dbx" data-z="9" src="web201404/c-dbx.png" width="16.15789473684211%" height="auto" class="阅读服务体验">
<div id="iPad" class="layer obj z9" data-z="5" data-w="1024" data-h="788">
<img id="iPadFrame" src="web201404/ipad.png" width="100%" height="100%" alt="文学平台">
<div id="books">
<div id="booksTurn">
<img class="page z1" src="web201404/ipad-cover.png" width="100%" height="100%" alt="腾讯文学">
<img class="page z2" src="web201404/ipad-page1.png" width="100%" height="100%" alt="畅销图书">
</div>
</div>
</div>
<img class="layer z1 c-title" data-z="2" src="web201404/title-c.png" width="401" height="112" alt="文学 Literature">
<p class="layer z1 s-desc" data-z="5">中国极具规模和影响力的文学平台，目前已实现移动互联网和互联网阅读的互联互通。腾讯阅读以“一生阅读伙伴”为理念，依托互动娱乐的泛娱乐资源为行业人士提供全文学产业链的商业变现机会，同时为广大读者创造全文学各细分领域一体化阅读服务体验。<span class="s-link"><a href="#" target="_blank">book.qq.com ></a></span></p>
</div>
<div class="section screen" id="d">
<h3 class="hide">腾讯动漫</h3>
<div class="layer bg z-8 bg-d" data-z="9"></div>
<img class="layer z8 dbx" data-z="9" src="web201404/d-dbx.png" width="" height="auto" alt="腾讯动漫">
<!-- hand -->
<img class="layer obj z1 cartoon-hand" data-z="1" src="web201404/hand.png" width="1000" height="800" alt="火影忍者">
<div id="renwu" class="layer obj z-8" data-z="8" data-w="860" data-h="840">
<span class="rw-1 z7"><img src="web201404/renwu/cartoon-1.png" width="100%" height="100%"></span>
<span class="rw-2 z6"><img src="web201404/renwu/cartoon-2.png" width="100%" height="100%"></span>
<span class="rw-3 z5"><img src="web201404/renwu/cartoon-3.png" width="100%" height="100%"></span>
<span class="rw-4 z4"><img src="web201404/renwu/cartoon-4.png" width="100%" height="100%"></span>
</div>
<img class="layer z2 d-title" data-z="2" src="web201404/title-d.png" alt="动漫 animation & comic" width="546" height="112">
<p class="layer z1 s-desc" data-z="2">腾讯动漫平台于2012年3月21日正式成立，成为腾讯互动娱乐推出的首个泛娱乐实体平台。作为中国目前最具规模和活力的正版动漫发行平台，腾讯动漫平台以版权为核心，以培育原创为特色，积极促进中国动漫更好地与新平台、新技术融合，引领产业变革。<span class="s-link"><a href="#" target="_blank">ac.qq.com ></a></span></p>
<img class="layer z3 light light-1" data-z="3" src="web201404/light-1.png" width="211" height="252" alt="腾讯互动娱乐">
<img class="layer z3 light light-2" data-z="3" src="web201404/light-2.png" width="210" height="161" alt="泛娱乐">
<img class="layer z3 light light-3" data-z="3" src="web201404/light-3.png" width="354" height="200" alt="腾讯游戏">
<img class="layer z3 light light-4" data-z="3" src="web201404/light-4.png" width="269" height="160" alt="腾讯文学">
<img class="layer z3 light light-5" data-z="3" src="web201404/light-5.png" width="214" height="107" alt="腾讯动漫">
<img class="layer z3 light light-6" data-z="3" src="web201404/light-6.png" width="310" height="153" alt="腾讯泛娱乐">
<img class="layer z3 light light-7" data-z="3" src="web201404/light-7.png" width="469" height="165" alt="互动娱乐品牌">
<img class="layer z3 light light-8" data-z="3" src="web201404/light-8.png" width="209" height="164" alt="粉丝经济">
</div>
<div class="section screen" id="e">
<h3 class="hide">影视&戏剧</h3>
<div class="layer bg z-11 bg-e" data-z="9"></div>
<img class="layer z8 dbx" data-z="9" src="web201404/e-dbx.png" width="307" height="165">
<img class="layer obj z8 ys-1" data-z="6" src="web201404/roles/ys-1.png" width="630" height="735" alt="泛娱乐">
<img class="layer obj z8 ys-2" data-z="4" src="web201404/roles/ys-2.png" width="888" height="1046" alt="品牌文化">
<img class="layer obj z8 ys-3" data-z="3" src="web201404/roles/ys-3.png" width="170" height="161" alt="影视产业">
<img class="layer obj z8 ys-4" data-z="1" src="web201404/roles/ys-4.png" width="298" height="405" alt="戏剧产业">
<img class="layer z2 e-title" data-z="2" src="web201404/title-e.png" alt="动漫 animation & comic" width="564" height="112">
<p class="layer z1 s-desc" data-z="5">以“品牌”、“文化”、“内容”多维度交互为目标，在文化产业融合中积极探索，尝试与影视产业、戏剧产业跨界联姻，通过与一流电影人、戏剧制作人携手合作，促进电影、戏剧与游戏的跨界艺术融合，为腾讯互动娱乐用户创造更加丰富的文化内涵和用户体验，为社会贡献优质的互动娱乐内容和服务。<span class="s-link"><a href="film.html">查看详情 ></a></span></p>
</div>
<div class="section screen" id="f">
<h3 class="hide">版权&授权</h3>
<img class="layer z5 obj flx-1" data-z="5" src="svg/f-lx.svg" width="108" height="108" alt="品牌授权">
<img class="layer z5 obj flx-2" data-z="5" src="svg/f-lx.svg" width="108" height="108" alt="知识产权">
<img class="layer z9 obj cp-1" data-z="6" src="web201404/roles/cp-1.png" width="1860" height="1080" alt="IP（知识产权）">
<img class="layer z8 obj cp-2" data-z="3" src="web201404/roles/cp-2.png" width="1860" height="1080" alt="品牌授权">
<img class="layer z8 obj cp-3" data-z="1" src="web201404/roles/cp-3.png" width="1860" height="1080" alt="互动娱乐体验">
<img class="layer z2 f-title" data-z="2" src="web201404/title-f.png" width="594" height="107" alt="动漫 animation & comic">
<p class="layer z1 s-desc" data-z="5">品牌授权是腾讯互动娱乐业务泛娱乐战略的重要一环，主要通过IP（知识产权）授权的衍生产出物，为玩家提供多元化互动娱乐体验，培养游戏品牌文化，挖掘更丰富的品牌商业价值。腾讯互动娱乐旨在与优质的传统企业一起，探索多元化跨行业的多赢商业模式，打造腾讯互动娱乐旗下业务与品牌授权的产业链。<span class="s-link"><a href="cooperation.html">查看详情 ></a></span></p>
</div>
<div class="place-hold"></div>
</div>
<span class="layer z1 arrow-down" data-z="2" title="向下滚动查看更多"></span>
<span class="layer z1 arrow-up" data-z="2" title="向上滚动查看更多"></span>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/app.min.js"></script>
</body>
</html>
JS代码(app.min.js):
/*! ieg-portal */
jQuery.easing.jswing=jQuery.easing.swing,jQuery.extend(jQuery.easing,{
def:"easeOutQuad",swing:function(e,f,a,h,g){
return jQuery.easing[jQuery.easing.def](e,f,a,h,g)}
,easeInQuad:function(e,f,a,h,g){
return h*(f/=g)*f+a}
,easeOutQuad:function(e,f,a,h,g){
return-h*(f/=g)*(f-2)+a}
,easeInOutQuad:function(e,f,a,h,g){
return(f/=g/2)<1?h/2*f*f+a:-h/2*(--f*(f-2)-1)+a}
,easeInCubic:function(e,f,a,h,g){
return h*(f/=g)*f*f+a}
,easeOutCubic:function(e,f,a,h,g){
return h*((f=f/g-1)*f*f+1)+a}
,easeInOutCubic:function(e,f,a,h,g){
return(f/=g/2)<1?h/2*f*f*f+a:h/2*((f-=2)*f*f+2)+a}
,easeInQuart:function(e,f,a,h,g){
return h*(f/=g)*f*f*f+a}
,easeOutQuart:function(e,f,a,h,g){
return-h*((f=f/g-1)*f*f*f-1)+a}
,easeInOutQuart:function(e,f,a,h,g){
return(f/=g/2)<1?h/2*f*f*f*f+a:-h/2*((f-=2)*f*f*f-2)+a}
,easeInQuint:function(e,f,a,h,g){
return h*(f/=g)*f*f*f*f+a}
,easeOutQuint:function(e,f,a,h,g){
return h*((f=f/g-1)*f*f*f*f+1)+a}
,easeInOutQuint:function(e,f,a,h,g){
return(f/=g/2)<1?h/2*f*f*f*f*f+a:h/2*((f-=2)*f*f*f*f+2)+a}
,easeInSine:function(e,f,a,h,g){
return-h*Math.cos(f/g*(Math.PI/2))+h+a}
,easeOutSine:function(e,f,a,h,g){
return h*Math.sin(f/g*(Math.PI/2))+a}
,easeInOutSine:function(e,f,a,h,g){
return-h/2*(Math.cos(Math.PI*f/g)-1)+a}
,easeInExpo:function(e,f,a,h,g){
return 0==f?a:h*Math.pow(2,10*(f/g-1))+a}
,easeOutExpo:function(e,f,a,h,g){
return f==g?a+h:h*(-Math.pow(2,-10*f/g)+1)+a}
,easeInOutExpo:function(e,f,a,h,g){
return 0==f?a:f==g?a+h:(f/=g/2)<1?h/2*Math.pow(2,10*(f-1))+a:h/2*(-Math.pow(2,-10*--f)+2)+a}
,easeInCirc:function(e,f,a,h,g){
return-h*(Math.sqrt(1-(f/=g)*f)-1)+a}
,easeOutCirc:function(e,f,a,h,g){
return h*Math.sqrt(1-(f=f/g-1)*f)+a}
,easeInOutCirc:function(e,f,a,h,g){
return(f/=g/2)<1?-h/2*(Math.sqrt(1-f*f)-1)+a:h/2*(Math.sqrt(1-(f-=2)*f)+1)+a}
,easeInElastic:function(f,h,e,l,k){
var i=1.70158,j=0,g=l;
if(0==h)return e;
if(1==(h/=k))return e+l;
if(j||(j=.3*k),g<Math.abs(l)){
g=l;
var i=j/4}
else var i=j/(2*Math.PI)*Math.asin(l/g);
return-(g*Math.pow(2,10*(h-=1))*Math.sin(2*(h*k-i)*Math.PI/j))+e}
,easeOutElastic:function(f,h,e,l,k){
var i=1.70158,j=0,g=l;
if(0==h)return e;
if(1==(h/=k))return e+l;
if(j||(j=.3*k),g<Math.abs(l)){
g=l;
var i=j/4}
else var i=j/(2*Math.PI)*Math.asin(l/g);
return g*Math.pow(2,-10*h)*Math.sin(2*(h*k-i)*Math.PI/j)+l+e}
,easeInOutElastic:function(f,h,e,l,k){
var i=1.70158,j=0,g=l;
if(0==h)return e;
if(2==(h/=k/2))return e+l;
if(j||(j=.3*k*1.5),g<Math.abs(l)){
g=l;
var i=j/4}
else var i=j/(2*Math.PI)*Math.asin(l/g);
return 1>h?-.5*g*Math.pow(2,10*(h-=1))*Math.sin(2*(h*k-i)*Math.PI/j)+e:g*Math.pow(2,-10*(h-=1))*Math.sin(2*(h*k-i)*Math.PI/j)*.5+l+e}
,easeInBack:function(e,f,a,i,h,g){
return void 0==g&&(g=1.70158),i*(f/=h)*f*((g+1)*f-g)+a}
,easeOutBack:function(e,f,a,i,h,g){
return void 0==g&&(g=1.70158),i*((f=f/h-1)*f*((g+1)*f+g)+1)+a}
,easeInOutBack:function(e,f,a,i,h,g){
return void 0==g&&(g=1.70158),(f/=h/2)<1?i/2*f*f*(((g*=1.525)+1)*f-g)+a:i/2*((f-=2)*f*(((g*=1.525)+1)*f+g)+2)+a}
,easeInBounce:function(e,f,a,h,g){
return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a}
,easeOutBounce:function(e,f,a,h,g){
return(f/=g)<1/2.75?7.5625*h*f*f+a:2/2.75>f?h*(7.5625*(f-=1.5/2.75)*f+.75)+a:2.5/2.75>f?h*(7.5625*(f-=2.25/2.75)*f+.9375)+a:h*(7.5625*(f-=2.625/2.75)*f+.984375)+a}
,easeInOutBounce:function(e,f,a,h,g){
return g/2>f?.5*jQuery.easing.easeInBounce(e,2*f,0,h,g)+a:.5*jQuery.easing.easeOutBounce(e,2*f-g,0,h,g)+.5*h+a}
}
),function(factory){
"function"==typeof define&&define.amd?define(["jquery"],factory):"object"==typeof exports?module.exports=factory:factory(jQuery)}
(function($){
function handler(event){
var orgEvent=event||window.event,args=slice.call(arguments,1),delta=0,deltaX=0,deltaY=0,absDelta=0,offsetX=0,offsetY=0;
if(event=$.event.fix(orgEvent),event.type="mousewheel","detail"in orgEvent&&(deltaY=-1*orgEvent.detail),"wheelDelta"in orgEvent&&(deltaY=orgEvent.wheelDelta),"wheelDeltaY"in orgEvent&&(deltaY=orgEvent.wheelDeltaY),"wheelDeltaX"in orgEvent&&(deltaX=-1*orgEvent.wheelDeltaX),"axis"in orgEvent&&orgEvent.axis===orgEvent.HORIZONTAL_AXIS&&(deltaX=-1*deltaY,deltaY=0),delta=0===deltaY?deltaX:deltaY,"deltaY"in orgEvent&&(deltaY=-1*orgEvent.deltaY,delta=deltaY),"deltaX"in orgEvent&&(deltaX=orgEvent.deltaX,0===deltaY&&(delta=-1*deltaX)),0!==deltaY||0!==deltaX){
if(1===orgEvent.deltaMode){
var lineHeight=$.data(this,"mousewheel-line-height");
delta*=lineHeight,deltaY*=lineHeight,deltaX*=lineHeight}
else if(2===orgEvent.deltaMode){
var pageHeight=$.data(this,"mousewheel-page-height");
delta*=pageHeight,deltaY*=pageHeight,deltaX*=pageHeight}
if(absDelta=Math.max(Math.abs(deltaY),Math.abs(deltaX)),(!lowestDelta||lowestDelta>absDelta)&&(lowestDelta=absDelta,shouldAdjustOldDeltas(orgEvent,absDelta)&&(lowestDelta/=40)),shouldAdjustOldDeltas(orgEvent,absDelta)&&(delta/=40,deltaX/=40,deltaY/=40),delta=Math[delta>=1?"floor":"ceil"](delta/lowestDelta),deltaX=Math[deltaX>=1?"floor":"ceil"](deltaX/lowestDelta),deltaY=Math[deltaY>=1?"floor":"ceil"](deltaY/lowestDelta),special.settings.normalizeOffset&&this.getBoundingClientRect){
var boundingRect=this.getBoundingClientRect();
offsetX=event.clientX-boundingRect.left,offsetY=event.clientY-boundingRect.top}
return event.deltaX=deltaX,event.deltaY=deltaY,event.deltaFactor=lowestDelta,event.offsetX=offsetX,event.offsetY=offsetY,event.deltaMode=0,args.unshift(event,delta,deltaX,deltaY),nullLowestDeltaTimeout&&clearTimeout(nullLowestDeltaTimeout),nullLowestDeltaTimeout=setTimeout(nullLowestDelta,200),($.event.dispatch||$.event.handle).apply(this,args)}
}
function nullLowestDelta(){
lowestDelta=null}
function shouldAdjustOldDeltas(orgEvent,absDelta){
return special.settings.adjustOldDeltas&&"mousewheel"===orgEvent.type&&absDelta%120===0}
var nullLowestDeltaTimeout,lowestDelta,toFix=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],toBind="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],slice=Array.prototype.slice;
if($.event.fixHooks)for(var i=toFix.length;
i;
)$.event.fixHooks[toFix[--i]]=$.event.mouseHooks;
var special=$.event.special.mousewheel={
version:"3.1.11",setup:function(){
if(this.addEventListener)for(var i=toBind.length;
i;
)this.addEventListener(toBind[--i],handler,!1);
else this.onmousewheel=handler;
$.data(this,"mousewheel-line-height",special.getLineHeight(this)),$.data(this,"mousewheel-page-height",special.getPageHeight(this))}
,teardown:function(){
if(this.removeEventListener)for(var i=toBind.length;
i;
)this.removeEventListener(toBind[--i],handler,!1);
else this.onmousewheel=null;
$.removeData(this,"mousewheel-line-height"),$.removeData(this,"mousewheel-page-height")}
,getLineHeight:function(elem){
var $parent=$(elem)["offsetParent"in $.fn?"offsetParent":"parent"]();
return $parent.length||($parent=$("body")),parseInt($parent.css("fontSize"),10)}
,getPageHeight:function(elem){
return $(elem).height()}
,settings:{
adjustOldDeltas:!0,normalizeOffset:!0}
}
;
$.fn.extend({
mousewheel:function(fn){
return fn?this.bind("mousewheel",fn):this.trigger("mousewheel")}
,unmousewheel:function(fn){
return this.unbind("mousewheel",fn)}
}
)}
),function($){
"use strict";
var has3d,vendor="",PI=Math.PI,A90=PI/2,isTouch="ontouchstart"in window,events=isTouch?{
start:"touchstart",move:"touchmove",end:"touchend"}
:{
start:"mousedown",move:"mousemove",end:"mouseup"}
,corners={
backward:["bl","tl"],forward:["br","tr"],all:["tl","bl","tr","br"]}
,displays=["single","double"],turnOptions={
page:1,gradients:!0,duration:600,acceleration:!0,display:"double",when:null}
,flipOptions={
folding:null,corners:"forward",cornerSize:100,gradients:!0,duration:600,acceleration:!0}
,pagesInDOM=6,pagePosition={
0:{
top:0,left:0,right:"auto",bottom:"auto"}
,1:{
top:0,right:0,left:"auto",bottom:"auto"}
}
,divAtt=function(top,left,zIndex,overf){
return{
css:{
position:"absolute",top:top,left:left,overflow:overf||"hidden","z-index":zIndex||"auto"}
}
}
,bezier=function(p1,p2,p3,p4,t){
var mum1=1-t,mum13=mum1*mum1*mum1,mu3=t*t*t;
return point2D(Math.round(mum13*p1.x+3*t*mum1*mum1*p2.x+3*t*t*mum1*p3.x+mu3*p4.x),Math.round(mum13*p1.y+3*t*mum1*mum1*p2.y+3*t*t*mum1*p3.y+mu3*p4.y))}
,deg=function(radians){
return radians/PI*180}
,point2D=function(x,y){
return{
x:x,y:y}
}
,translate=function(x,y,use3d){
return has3d&&use3d?" translate3d("+x+"px,"+y+"px,0px) ":" translate("+x+"px,"+y+"px) "}
,rotate=function(degrees){
return" rotate("+degrees+"deg) "}
,has=function(property,object){
return Object.prototype.hasOwnProperty.call(object,property)}
,getPrefix=function(){
for(var vendorPrefixes=["Moz","Webkit","Khtml","O","ms"],len=vendorPrefixes.length,vendor="";
len--;
)vendorPrefixes[len]+"Transform"in document.body.style&&(vendor="-"+vendorPrefixes[len].toLowerCase()+"-");
return vendor}
,gradient=function(obj,p0,p1,colors,numColors){
var j,cols=[];
if("-webkit-"==vendor){
for(j=0;
numColors>j;
j++)cols.push("color-stop("+colors[j][0]+","+colors[j][1]+")");
obj.css({
"background-image":"-webkit-gradient(linear,"+p0.x+"% "+p0.y+"%,"+p1.x+"% "+p1.y+"%,"+cols.join(",")+" )"}
)}
else{
p0={
x:p0.x/100*obj.width(),y:p0.y/100*obj.height()}
,p1={
x:p1.x/100*obj.width(),y:p1.y/100*obj.height()}
;
var dx=p1.x-p0.x,dy=p1.y-p0.y,angle=Math.atan2(dy,dx),angle2=angle-Math.PI/2,diagonal=Math.abs(obj.width()*Math.sin(angle2))+Math.abs(obj.height()*Math.cos(angle2)),gradientDiagonal=Math.sqrt(dy*dy+dx*dx),corner=point2D(p1.x<p0.x?obj.width():0,p1.y<p0.y?obj.height():0),slope=Math.tan(angle),inverse=-1/slope,x=(inverse*corner.x-corner.y-slope*p0.x+p0.y)/(inverse-slope),c={
x:x,y:inverse*x-inverse*corner.x+corner.y}
,segA=Math.sqrt(Math.pow(c.x-p0.x,2)+Math.pow(c.y-p0.y,2));
for(j=0;
numColors>j;
j++)cols.push(" "+colors[j][1]+" "+100*(segA+gradientDiagonal*colors[j][0])/diagonal+"%");
obj.css({
"background-image":vendor+"linear-gradient("+-angle+"rad,"+cols.join(",")+")"}
)}
}
,turnMethods={
init:function(opts){
void 0===has3d&&(has3d="WebKitCSSMatrix"in window||"MozPerspective"in document.body.style,vendor=getPrefix());
var i,data=this.data(),ch=this.children();
if(opts=$.extend({
width:this.width(),height:this.height()}
,turnOptions,opts),data.opts=opts,data.pageObjs={
}
,data.pages={
}
,data.pageWrap={
}
,data.pagePlace={
}
,data.pageMv=[],data.totalPages=opts.pages||0,opts.when)for(i in opts.when)has(i,opts.when)&&this.bind(i,opts.when[i]);
for(this.css({
position:"relative",width:opts.width,height:opts.height}
),this.turn("display",opts.display),has3d&&!isTouch&&opts.acceleration&&this.transform(translate(0,0,!0)),i=0;
i<ch.length;
i++)this.turn("addPage",ch[i],i+1);
return this.turn("page",opts.page),corners=$.extend({
}
,corners,opts.corners),$(this).bind(events.start,function(e){
for(var page in data.pages)if(has(page,data.pages)&&flipMethods._eventStart.call(data.pages[page],e)===!1)return!1}
),$(document).bind(events.move,function(e){
for(var page in data.pages)has(page,data.pages)&&flipMethods._eventMove.call(data.pages[page],e)}
).bind(events.end,function(e){
for(var page in data.pages)has(page,data.pages)&&flipMethods._eventEnd.call(data.pages[page],e)}
),data.done=!0,this}
,addPage:function(element,page){
var incPages=!1,data=this.data(),lastPage=data.totalPages+1;
if(page){
if(page==lastPage)page=lastPage,incPages=!0;
else if(page>lastPage)throw new Error('It is impossible to add the page "'+page+'",the maximum value is:"'+lastPage+'"')}
else page=lastPage,incPages=!0;
return page>=1&&lastPage>=page&&(data.done&&this.turn("stop"),page in data.pageObjs&&turnMethods._movePages.call(this,page,1),incPages&&(data.totalPages=lastPage),data.pageObjs[page]=$(element).addClass("turn-page p"+page),turnMethods._addPage.call(this,page),data.done&&this.turn("update"),turnMethods._removeFromDOM.call(this)),this}
,_addPage:function(page){
var data=this.data(),element=data.pageObjs[page];
if(element)if(turnMethods._necessPage.call(this,page)){
if(!data.pageWrap[page]){
var pageWidth="double"==data.display?this.width()/2:this.width(),pageHeight=this.height();
element.css({
width:pageWidth,height:pageHeight}
),data.pagePlace[page]=page,data.pageWrap[page]=$("<div/>",{
"class":"turn-page-wrapper",page:page,css:{
position:"absolute",overflow:"hidden",width:pageWidth,height:pageHeight}
}
).css(pagePosition["double"==data.display?page%2:0]),this.append(data.pageWrap[page]),data.pageWrap[page].prepend(data.pageObjs[page])}
page&&1!=turnMethods._setPageLoc.call(this,page)||turnMethods._makeFlip.call(this,page)}
else data.pagePlace[page]=0,data.pageObjs[page]&&data.pageObjs[page].remove()}
,hasPage:function(page){
return page in this.data().pageObjs}
,_makeFlip:function(page){
var data=this.data();
if(!data.pages[page]&&data.pagePlace[page]==page){
var single="single"==data.display,even=page%2;
data.pages[page]=data.pageObjs[page].css({
width:single?this.width():this.width()/2,height:this.height()}
).flip({
page:page,next:single&&page===data.totalPages?page-1:even||single?page+1:page-1,turn:this,duration:data.opts.duration,acceleration:data.opts.acceleration,corners:single?"all":even?"forward":"backward",backGradient:data.opts.gradients,frontGradient:data.opts.gradients}
).flip("disable",data.disabled).bind("pressed",turnMethods._pressed).bind("released",turnMethods._released).bind("start",turnMethods._start).bind("end",turnMethods._end).bind("flip",turnMethods._flip)}
return data.pages[page]}
,_makeRange:function(){
var page,range=(this.data(),this.turn("range"));
for(page=range[0];
page<=range[1];
page++)turnMethods._addPage.call(this,page)}
,range:function(page){
var remainingPages,left,right,data=this.data();
page=page||data.tpage||data.page;
var view=turnMethods._view.call(this,page);
if(1>page||page>data.totalPages)throw new Error('"'+page+'" is not a page for range');
return view[1]=view[1]||view[0],view[0]>=1&&view[1]<=data.totalPages?(remainingPages=Math.floor((pagesInDOM-2)/2),data.totalPages-view[1]>view[0]?(left=Math.min(view[0]-1,remainingPages),right=2*remainingPages-left):(right=Math.min(data.totalPages-view[1],remainingPages),left=2*remainingPages-right)):(left=pagesInDOM-1,right=pagesInDOM-1),[Math.max(1,view[0]-left),Math.min(data.totalPages,view[1]+right)]}
,_necessPage:function(page){
if(0===page)return!0;
var range=this.turn("range");
return page>=range[0]&&page<=range[1]}
,_removeFromDOM:function(){
var page,data=this.data();
for(page in data.pageWrap)has(page,data.pageWrap)&&!turnMethods._necessPage.call(this,page)&&turnMethods._removePageFromDOM.call(this,page)}
,_removePageFromDOM:function(page){
var data=this.data();
if(data.pages[page]){
var dd=data.pages[page].data();
dd.f&&dd.f.fwrapper&&dd.f.fwrapper.remove(),data.pages[page].remove(),delete data.pages[page]}
data.pageObjs[page]&&data.pageObjs[page].remove(),data.pageWrap[page]&&(data.pageWrap[page].remove(),delete data.pageWrap[page]),delete data.pagePlace[page]}
,removePage:function(page){
var data=this.data();
return data.pageObjs[page]&&(this.turn("stop"),turnMethods._removePageFromDOM.call(this,page),delete data.pageObjs[page],turnMethods._movePages.call(this,page,-1),data.totalPages=data.totalPages-1,turnMethods._makeRange.call(this),data.page>data.totalPages&&this.turn("page",data.totalPages)),this}
,_movePages:function(from,change){
var page,data=this.data(),single="single"==data.display,move=function(page){
var next=page+change,odd=next%2;
data.pageObjs[page]&&(data.pageObjs[next]=data.pageObjs[page].removeClass("page"+page).addClass("page"+next)),data.pagePlace[page]&&data.pageWrap[page]&&(data.pagePlace[next]=next,data.pageWrap[next]=data.pageWrap[page].css(pagePosition[single?0:odd]).attr("page",next),data.pages[page]&&(data.pages[next]=data.pages[page].flip("options",{
page:next,next:single||odd?next+1:next-1,corners:single?"all":odd?"forward":"backward"}
)),change&&(delete data.pages[page],delete data.pagePlace[page],delete data.pageObjs[page],delete data.pageWrap[page],delete data.pageObjs[page]))}
;
if(change>0)for(page=data.totalPages;
page>=from;
page--)move(page);
else for(page=from;
page<=data.totalPages;
page++)move(page)}
,display:function(display){
var data=this.data(),currentDisplay=data.display;
if(display){
if(-1==$.inArray(display,displays))throw new Error('"'+display+'" is not a value for display');
if("single"==display?data.pageObjs[0]||(this.turn("stop").css({
overflow:"hidden"}
),data.pageObjs[0]=$("<div />",{
"class":"turn-page p-temporal"}
).css({
width:this.width(),height:this.height()}
).appendTo(this)):data.pageObjs[0]&&(this.turn("stop").css({
overflow:""}
),data.pageObjs[0].remove(),delete data.pageObjs[0]),data.display=display,currentDisplay){
var size=this.turn("size");
turnMethods._movePages.call(this,1,0),this.turn("size",size.width,size.height).turn("update")}
return this}
return currentDisplay}
,animating:function(){
return this.data().pageMv.length>0}
,disable:function(bool){
var page,data=this.data(),view=this.turn("view");
data.disabled=void 0===bool||bool===!0;
for(page in data.pages)has(page,data.pages)&&data.pages[page].flip("disable",bool?$.inArray(page,view):!1);
return this}
,size:function(width,height){
if(width&&height){
var page,data=this.data(),pageWidth="double"==data.display?width/2:width;
this.css({
width:width,height:height}
),data.pageObjs[0]&&data.pageObjs[0].css({
width:pageWidth,height:height}
);
for(page in data.pageWrap)has(page,data.pageWrap)&&(data.pageObjs[page].css({
width:pageWidth,height:height}
),data.pageWrap[page].css({
width:pageWidth,height:height}
),data.pages[page]&&data.pages[page].css({
width:pageWidth,height:height}
));
return this.turn("resize"),this}
return{
width:this.width(),height:this.height()}
}
,resize:function(){
var page,data=this.data();
for(data.pages[0]&&(data.pageWrap[0].css({
left:-this.width()}
),data.pages[0].flip("resize",!0)),page=1;
page<=data.totalPages;
page++)data.pages[page]&&data.pages[page].flip("resize",!0)}
,_removeMv:function(page){
var i,data=this.data();
for(i=0;
i<data.pageMv.length;
i++)if(data.pageMv[i]==page)return data.pageMv.splice(i,1),!0;
return!1}
,_addMv:function(page){
var data=this.data();
turnMethods._removeMv.call(this,page),data.pageMv.push(page)}
,_view:function(page){
var data=this.data();
return page=page||data.page,"double"==data.display?page%2?[page-1,page]:[page,page+1]:[page]}
,view:function(page){
var data=this.data(),view=turnMethods._view.call(this,page);
return"double"==data.display?[view[0]>0?view[0]:0,view[1]<=data.totalPages?view[1]:0]:[view[0]>0&&view[0]<=data.totalPages?view[0]:0]}
,stop:function(){
var i,opts,data=this.data(),pages=data.pageMv;
data.pageMv=[],data.tpage&&(data.page=data.tpage,delete data.tpage);
for(i in pages)has(i,pages)&&(opts=data.pages[pages[i]].data().f.opts,flipMethods._moveFoldingPage.call(data.pages[pages[i]],null),data.pages[pages[i]].flip("hideFoldedPage"),data.pagePlace[opts.next]=opts.next,opts.force&&(opts.next=opts.page%2===0?opts.page-1:opts.page+1,delete opts.force));
return this.turn("update"),this}
,pages:function(pages){
var data=this.data();
if(pages){
if(pages<data.totalPages){
for(var page=pages+1;
page<=data.totalPages;
page++)this.turn("removePage",page);
this.turn("page")>pages&&this.turn("page",pages)}
return data.totalPages=pages,this}
return data.totalPages}
,_fitPage:function(page,ok){
var data=this.data(),newView=this.turn("view",page);
data.page!=page&&(this.trigger("turning",[page,newView]),-1!=$.inArray(1,newView)&&this.trigger("first"),-1!=$.inArray(data.totalPages,newView)&&this.trigger("last")),data.pageObjs[page]&&(data.tpage=page,this.turn("stop",ok),turnMethods._removeFromDOM.call(this),turnMethods._makeRange.call(this),this.trigger("turned",[page,newView]))}
,_turnPage:function(page){
var current,next,data=this.data(),view=this.turn("view"),newView=this.turn("view",page);
if(data.page!=page&&(this.trigger("turning",[page,newView]),-1!=$.inArray(1,newView)&&this.trigger("first"),-1!=$.inArray(data.totalPages,newView)&&this.trigger("last")),data.pageObjs[page]&&(data.tpage=page,this.turn("stop"),turnMethods._makeRange.call(this),"single"==data.display?(current=view[0],next=newView[0]):view[1]&&page>view[1]?(current=view[1],next=newView[0]):view[0]&&page<view[0]&&(current=view[0],next=newView[1]),data.pages[current])){
var opts=data.pages[current].data().f.opts;
data.tpage=next,opts.next!=next&&(opts.next=next,data.pagePlace[next]=opts.page,opts.force=!0),"single"==data.display?data.pages[current].flip("turnPage",newView[0]>view[0]?"br":"bl"):data.pages[current].flip("turnPage")}
}
,page:function(page){
page=parseInt(page,10);
var data=this.data();
return page>0&&page<=data.totalPages?(data.done&&-1==$.inArray(page,this.turn("view"))?turnMethods._turnPage.call(this,page):turnMethods._fitPage.call(this,page),this):data.page}
,next:function(){
var data=this.data();
return this.turn("page",turnMethods._view.call(this,data.page).pop()+1)}
,previous:function(){
var data=this.data();
return this.turn("page",turnMethods._view.call(this,data.page).shift()-1)}
,_addMotionPage:function(){
var opts=$(this).data().f.opts,turn=opts.turn,dd=turn.data();
opts.pageMv=opts.page,turnMethods._addMv.call(turn,opts.pageMv),dd.pagePlace[opts.next]=opts.page,turn.turn("update")}
,_start:function(e,opts,corner){
var data=opts.turn.data(),event=$.Event("start");
if(e.stopPropagation(),opts.turn.trigger(event,[opts,corner]),event.isDefaultPrevented())return void e.preventDefault();
if("single"==data.display){
var left="l"==corner.charAt(1);
1==opts.page&&left||opts.page==data.totalPages&&!left?e.preventDefault():left?(opts.next=opts.next<opts.page?opts.next:opts.page-1,opts.force=!0):opts.next=opts.next>opts.page?opts.next:opts.page+1}
turnMethods._addMotionPage.call(this)}
,_end:function(e,turned){
var that=$(this),data=that.data().f,opts=data.opts,turn=opts.turn,dd=turn.data();
e.stopPropagation(),turned||dd.tpage?(dd.tpage==opts.next||dd.tpage==opts.page)&&(delete dd.tpage,turnMethods._fitPage.call(turn,dd.tpage||opts.next,!0)):(turnMethods._removeMv.call(turn,opts.pageMv),turn.turn("update"))}
,_pressed:function(){
var page,that=$(this),data=that.data().f,turn=data.opts.turn,pages=turn.data().pages;
for(page in pages)page!=data.opts.page&&pages[page].flip("disable",!0);
return data.time=(new Date).getTime()}
,_released:function(e,point){
var that=$(this),data=that.data().f;
e.stopPropagation(),((new Date).getTime()-data.time<200||point.x<0||point.x>$(this).width())&&(e.preventDefault(),data.opts.turn.data().tpage=data.opts.next,data.opts.turn.turn("update"),$(that).flip("turnPage"))}
,_flip:function(){
var opts=$(this).data().f.opts;
opts.turn.trigger("turn",[opts.next])}
,calculateZ:function(mv){
var i,page,nextPage,placePage,dpage,that=this,data=this.data(),view=this.turn("view"),currentPage=view[0]||view[1],r={
pageZ:{
}
,partZ:{
}
,pageV:{
}
}
,addView=function(page){
var view=that.turn("view",page);
view[0]&&(r.pageV[view[0]]=!0),view[1]&&(r.pageV[view[1]]=!0)}
;
for(i=0;
i<mv.length;
i++)page=mv[i],nextPage=data.pages[page].data().f.opts.next,placePage=data.pagePlace[page],addView(page),addView(nextPage),dpage=data.pagePlace[nextPage]==nextPage?nextPage:page,r.pageZ[dpage]=data.totalPages-Math.abs(currentPage-dpage),r.partZ[placePage]=2*data.totalPages+Math.abs(currentPage-dpage);
return r}
,update:function(){
var page,data=this.data();
if(data.pageMv.length&&0!==data.pageMv[0]){
var apage,pos=this.turn("calculateZ",data.pageMv),view=this.turn("view",data.tpage);
data.pagePlace[view[0]]==view[0]?apage=view[0]:data.pagePlace[view[1]]==view[1]&&(apage=view[1]);
for(page in data.pageWrap)has(page,data.pageWrap)&&(data.pageWrap[page].css({
display:pos.pageV[page]?"":"none","z-index":pos.pageZ[page]||0}
),data.pages[page]&&(data.pages[page].flip("z",pos.partZ[page]||null),pos.pageV[page]&&data.pages[page].flip("resize"),data.tpage&&data.pages[page].flip("disable",!0)))}
else for(page in data.pageWrap)if(has(page,data.pageWrap)){
var pageLocation=turnMethods._setPageLoc.call(this,page);
data.pages[page]&&data.pages[page].flip("disable",data.disabled||1!=pageLocation).flip("z",null)}
}
,_setPageLoc:function(page){
var data=this.data(),view=this.turn("view");
return page==view[0]||page==view[1]?(data.pageWrap[page].css({
"z-index":data.totalPages,display:""}
),1):"single"==data.display&&page==view[0]+1||"double"==data.display&&page==view[0]-2||page==view[1]+2?(data.pageWrap[page].css({
"z-index":data.totalPages-1,display:""}
),2):(data.pageWrap[page].css({
"z-index":0,display:"none"}
),0)}
}
,flipMethods={
init:function(opts){
return opts.gradients&&(opts.frontGradient=!0,opts.backGradient=!0),this.data({
f:{
}
}
),this.flip("options",opts),flipMethods._addPageWrapper.call(this),this}
,setData:function(d){
var data=this.data();
return data.f=$.extend(data.f,d),this}
,options:function(opts){
var data=this.data().f;
return opts?(flipMethods.setData.call(this,{
opts:$.extend({
}
,data.opts||flipOptions,opts)}
),this):data.opts}
,z:function(z){
var data=this.data().f;
return data.opts["z-index"]=z,data.fwrapper.css({
"z-index":z||parseInt(data.parent.css("z-index"),10)||0}
),this}
,_cAllowed:function(){
return corners[this.data().f.opts.corners]||this.data().f.opts.corners}
,_cornerActivated:function(e){
if(void 0===e.originalEvent)return!1;
e=isTouch?e.originalEvent.touches:[e];
var data=this.data().f,pos=data.parent.offset(),width=this.width(),height=this.height(),c={
x:Math.max(0,e[0].pageX-pos.left),y:Math.max(0,e[0].pageY-pos.top)}
,csz=data.opts.cornerSize,allowedCorners=flipMethods._cAllowed.call(this);
if(c.x<=0||c.y<=0||c.x>=width||c.y>=height)return!1;
if(c.y<csz)c.corner="t";
else{
if(!(c.y>=height-csz))return!1;
c.corner="b"}
if(c.x<=csz)c.corner+="l";
else{
if(!(c.x>=width-csz))return!1;
c.corner+="r"}
return-1==$.inArray(c.corner,allowedCorners)?!1:c}
,_c:function(corner,opts){
return opts=opts||0,{
tl:point2D(opts,opts),tr:point2D(this.width()-opts,opts),bl:point2D(opts,this.height()-opts),br:point2D(this.width()-opts,this.height()-opts)}
[corner]}
,_c2:function(corner){
return{
tl:point2D(2*this.width(),0),tr:point2D(-this.width(),0),bl:point2D(2*this.width(),this.height()),br:point2D(-this.width(),this.height())}
[corner]}
,_foldingPage:function(){
var opts=this.data().f.opts;
if(opts.folding)return opts.folding;
if(opts.turn){
var data=opts.turn.data();
return"single"==data.display?data.pageObjs[opts.next]?data.pageObjs[0]:null:data.pageObjs[opts.next]}
}
,_backGradient:function(){
var data=this.data().f,turn=data.opts.turn,gradient=data.opts.backGradient&&(!turn||"single"==turn.data().display||2!=data.opts.page&&data.opts.page!=turn.data().totalPages-1);
return gradient&&!data.bshadow&&(data.bshadow=$("<div/>",divAtt(0,0,1)).css({
position:"",width:this.width(),height:this.height()}
).appendTo(data.parent)),gradient}
,resize:function(full){
var data=this.data().f,width=this.width(),height=this.height(),size=Math.round(Math.sqrt(Math.pow(width,2)+Math.pow(height,2)));
full&&(data.wrapper.css({
width:size,height:size}
),data.fwrapper.css({
width:size,height:size}
).children(":first-child").css({
width:width,height:height}
),data.fpage.css({
width:height,height:width}
),data.opts.frontGradient&&data.ashadow.css({
width:height,height:width}
),flipMethods._backGradient.call(this)&&data.bshadow.css({
width:width,height:height}
)),data.parent.is(":visible")&&(data.fwrapper.css({
top:data.parent.offset().top,left:data.parent.offset().left}
),data.opts.turn&&data.fparent.css({
top:-data.opts.turn.offset().top,left:-data.opts.turn.offset().left}
)),this.flip("z",data.opts["z-index"])}
,_addPageWrapper:function(){
var data=this.data().f,parent=this.parent();
if(!data.wrapper){
{
var width=(this.css("left"),this.css("top"),this.width()),height=this.height();
Math.round(Math.sqrt(Math.pow(width,2)+Math.pow(height,2)))}
if(data.parent=parent,data.fparent=data.opts.turn?data.opts.turn.data().fparent:$("#turn-fwrappers"),!data.fparent){
var fparent=$("<div/>",{
css:{
"pointer-events":"none"}
}
).hide();
fparent.data().flips=0,data.opts.turn?(fparent.css(divAtt(-data.opts.turn.offset().top,-data.opts.turn.offset().left,"auto","visible").css).appendTo(data.opts.turn),data.opts.turn.data().fparent=fparent):fparent.css(divAtt(0,0,"auto","visible").css).attr("id","turn-fwrappers").appendTo($("body")),data.fparent=fparent}
this.css({
position:"absolute",top:0,left:0,bottom:"auto",right:"auto"}
),data.wrapper=$("<div/>",divAtt(0,0,this.css("z-index"))).appendTo(parent).prepend(this),data.fwrapper=$("<div/>",divAtt(parent.offset().top,parent.offset().left)).hide().appendTo(data.fparent),data.fpage=$("<div/>",{
css:{
cursor:"default"}
}
).appendTo($("<div/>",divAtt(0,0,0,"visible")).appendTo(data.fwrapper)),data.opts.frontGradient&&(data.ashadow=$("<div/>",divAtt(0,0,1)).appendTo(data.fpage)),flipMethods.setData.call(this,data),flipMethods.resize.call(this,!0)}
}
,_fold:function(point){
var px,gradientEndPointA,gradientEndPointB,gradientStartV,gradientSize,gradientOpacity,that=this,a=0,alpha=0,mv=point2D(0,0),df=point2D(0,0),tr=point2D(0,0),width=this.width(),height=this.height(),folding=flipMethods._foldingPage.call(this),data=(Math.tan(alpha),this.data().f),ac=data.opts.acceleration,h=data.wrapper.height(),o=flipMethods._c.call(this,point.corner),top="t"==point.corner.substr(0,1),left="l"==point.corner.substr(1,1),compute=function(){
var middle,rel=point2D(o.x?o.x-point.x:point.x,o.y?o.y-point.y:point.y),tan=Math.atan2(rel.y,rel.x);
alpha=A90-tan,a=deg(alpha),middle=point2D(left?width-rel.x/2:point.x+rel.x/2,rel.y/2);
var gamma=alpha-Math.atan2(middle.y,middle.x),distance=Math.max(0,Math.sin(gamma)*Math.sqrt(Math.pow(middle.x,2)+Math.pow(middle.y,2)));
if(tr=point2D(distance*Math.sin(alpha),distance*Math.cos(alpha)),alpha>A90&&(tr.x=tr.x+Math.abs(tr.y*Math.tan(tan)),tr.y=0,Math.round(tr.x*Math.tan(PI-alpha))<height))return point.y=Math.sqrt(Math.pow(height,2)+2*middle.x*rel.x),top&&(point.y=height-point.y),compute();
if(alpha>A90){
var beta=PI-alpha,dd=h-height/Math.sin(beta);
mv=point2D(Math.round(dd*Math.cos(beta)),Math.round(dd*Math.sin(beta))),left&&(mv.x=-mv.x),top&&(mv.y=-mv.y)}
px=Math.round(tr.y/Math.tan(alpha)+tr.x);
var side=width-px,sideX=side*Math.cos(2*alpha),sideY=side*Math.sin(2*alpha);
df=point2D(Math.round(left?side-sideX:px+sideX),Math.round(top?sideY:height-sideY)),gradientSize=side*Math.sin(alpha);
var endingPoint=flipMethods._c2.call(that,point.corner),far=Math.sqrt(Math.pow(endingPoint.x-point.x,2)+Math.pow(endingPoint.y-point.y,2));
return gradientOpacity=width>far?far/width:1,data.opts.frontGradient&&(gradientStartV=gradientSize>100?(gradientSize-100)/gradientSize:0,gradientEndPointA=point2D(gradientSize*Math.sin(A90-alpha)/height*100,gradientSize*Math.cos(A90-alpha)/width*100),top&&(gradientEndPointA.y=100-gradientEndPointA.y),left&&(gradientEndPointA.x=100-gradientEndPointA.x)),flipMethods._backGradient.call(that)&&(gradientEndPointB=point2D(gradientSize*Math.sin(alpha)/width*100,gradientSize*Math.cos(alpha)/height*100),left||(gradientEndPointB.x=100-gradientEndPointB.x),top||(gradientEndPointB.y=100-gradientEndPointB.y)),tr.x=Math.round(tr.x),tr.y=Math.round(tr.y),!0}
,transform=function(tr,c,x,a){
var f=["0","auto"],mvW=(width-h)*x[0]/100,mvH=(height-h)*x[1]/100,v={
left:f[c[0]],top:f[c[1]],right:f[c[2]],bottom:f[c[3]]}
,aliasingFk=90!=a&&-90!=a?left?-1:1:0;
x=x[0]+"% "+x[1]+"%",that.css(v).transform(rotate(a)+translate(tr.x+aliasingFk,tr.y,ac),x),data.fpage.parent().css(v),data.wrapper.transform(translate(-tr.x+mvW-aliasingFk,-tr.y+mvH,ac)+rotate(-a),x),data.fwrapper.transform(translate(-tr.x+mv.x+mvW,-tr.y+mv.y+mvH,ac)+rotate(-a),x),data.fpage.parent().transform(rotate(a)+translate(tr.x+df.x-mv.x,tr.y+df.y-mv.y,ac),x),data.opts.frontGradient&&gradient(data.ashadow,point2D(left?100:0,top?100:0),point2D(gradientEndPointA.x,gradientEndPointA.y),[[gradientStartV,"rgba(0,0,0,0)"],[.8*(1-gradientStartV)+gradientStartV,"rgba(0,0,0,"+.2*gradientOpacity+")"],[1,"rgba(255,255,255,"+.2*gradientOpacity+")"]],3,alpha),flipMethods._backGradient.call(that)&&gradient(data.bshadow,point2D(left?0:100,top?0:100),point2D(gradientEndPointB.x,gradientEndPointB.y),[[.8,"rgba(0,0,0,0)"],[1,"rgba(0,0,0,"+.3*gradientOpacity+")"],[1,"rgba(0,0,0,0)"]],3)}
;
switch(point.corner){
case"tl":point.x=Math.max(point.x,1),compute(),transform(tr,[1,0,0,1],[100,0],a),data.fpage.transform(translate(-height,-width,ac)+rotate(90-2*a),"100% 100%"),folding.transform(rotate(90)+translate(0,-height,ac),"0% 0%");
break;
case"tr":point.x=Math.min(point.x,width-1),compute(),transform(point2D(-tr.x,tr.y),[0,0,0,1],[0,0],-a),data.fpage.transform(translate(0,-width,ac)+rotate(-90+2*a),"0% 100%"),folding.transform(rotate(270)+translate(-width,0,ac),"0% 0%");
break;
case"bl":point.x=Math.max(point.x,1),compute(),transform(point2D(tr.x,-tr.y),[1,1,0,0],[100,100],-a),data.fpage.transform(translate(-height,0,ac)+rotate(-90+2*a),"100% 0%"),folding.transform(rotate(270)+translate(-width,0,ac),"0% 0%");
break;
case"br":point.x=Math.min(point.x,width-1),compute(),transform(point2D(-tr.x,-tr.y),[0,1,1,0],[0,100],a),data.fpage.transform(rotate(90-2*a),"0% 0%"),folding.transform(rotate(90)+translate(0,-height,ac),"0% 0%")}
data.point=point}
,_moveFoldingPage:function(bool){
var data=this.data().f,folding=flipMethods._foldingPage.call(this);
folding&&(bool?data.fpage.children()[data.ashadow?"1":"0"]||(flipMethods.setData.call(this,{
backParent:folding.parent()}
),data.fpage.prepend(folding)):data.backParent&&data.backParent.prepend(folding))}
,_showFoldedPage:function(c,animate){
var folding=flipMethods._foldingPage.call(this),dd=this.data(),data=dd.f;
if(!data.point||data.point.corner!=c.corner){
var event=$.Event("start");
if(this.trigger(event,[data.opts,c.corner]),event.isDefaultPrevented())return!1}
if(folding){
if(animate){
var that=this,point=data.point&&data.point.corner==c.corner?data.point:flipMethods._c.call(this,c.corner,1);
this.animatef({
from:[point.x,point.y],to:[c.x,c.y],duration:500,frame:function(v){
c.x=Math.round(v[0]),c.y=Math.round(v[1]),flipMethods._fold.call(that,c)}
}
)}
else flipMethods._fold.call(this,c),dd.effect&&!dd.effect.turning&&this.animatef(!1);
return data.fwrapper.is(":visible")||(data.fparent.show().data().flips++,flipMethods._moveFoldingPage.call(this,!0),data.fwrapper.show(),data.bshadow&&data.bshadow.show()),!0}
return!1}
,hide:function(){
var data=this.data().f,folding=flipMethods._foldingPage.call(this);
return 0===--data.fparent.data().flips&&data.fparent.hide(),this.css({
left:0,top:0,right:"auto",bottom:"auto"}
).transform("","0% 100%"),data.wrapper.transform("","0% 100%"),data.fwrapper.hide(),data.bshadow&&data.bshadow.hide(),folding.transform("","0% 0%"),this}
,hideFoldedPage:function(animate){
var data=this.data().f;
if(data.point){
var that=this,p1=data.point,hide=function(){
data.point=null,that.flip("hide"),that.trigger("end",[!1])}
;
if(animate){
var p4=flipMethods._c.call(this,p1.corner),top="t"==p1.corner.substr(0,1),delta=top?Math.min(0,p1.y-p4.y)/2:Math.max(0,p1.y-p4.y)/2,p2=point2D(p1.x,p1.y+delta),p3=point2D(p4.x,p4.y-delta);
this.animatef({
from:0,to:1,frame:function(v){
var np=bezier(p1,p2,p3,p4,v);
p1.x=np.x,p1.y=np.y,flipMethods._fold.call(that,p1)}
,complete:hide,duration:800,hiding:!0}
)}
else this.animatef(!1),hide()}
}
,turnPage:function(corner){
var that=this,data=this.data().f;
corner={
corner:data.corner?data.corner.corner:corner||flipMethods._cAllowed.call(this)[0]}
;
var p1=data.point||flipMethods._c.call(this,corner.corner,data.opts.turn?data.opts.turn.data().opts.elevation:0),p4=flipMethods._c2.call(this,corner.corner);
this.trigger("flip").animatef({
from:0,to:1,frame:function(v){
var np=bezier(p1,p1,p4,p4,v);
corner.x=np.x,corner.y=np.y,flipMethods._showFoldedPage.call(that,corner)}
,complete:function(){
that.trigger("end",[!0])}
,duration:data.opts.duration,turning:!0}
),data.corner=null}
,moving:function(){
return"effect"in this.data()}
,isTurning:function(){
return this.flip("moving")&&this.data().effect.turning}
,_eventStart:function(e){
var data=this.data().f;
if(!data.disabled&&!this.flip("isTurning")){
if(data.corner=flipMethods._cornerActivated.call(this,e),data.corner&&flipMethods._foldingPage.call(this,data.corner))return flipMethods._moveFoldingPage.call(this,!0),this.trigger("pressed",[data.point]),!1;
data.corner=null}
}
,_eventMove:function(e){
var data=this.data().f;
if(!data.disabled)if(e=isTouch?e.originalEvent.touches:[e],data.corner){
var pos=data.parent.offset();
data.corner.x=e[0].pageX-pos.left,data.corner.y=e[0].pageY-pos.top,flipMethods._showFoldedPage.call(this,data.corner)}
else if(!this.data().effect&&this.is(":visible")){
var corner=flipMethods._cornerActivated.call(this,e[0]);
if(corner){
var origin=flipMethods._c.call(this,corner.corner,data.opts.cornerSize/2);
corner.x=origin.x,corner.y=origin.y,flipMethods._showFoldedPage.call(this,corner,!0)}
else flipMethods.hideFoldedPage.call(this,!0)}
}
,_eventEnd:function(){
var data=this.data().f;
if(!data.disabled&&data.point){
var event=$.Event("released");
this.trigger(event,[data.point]),event.isDefaultPrevented()||flipMethods.hideFoldedPage.call(this,!0)}
data.corner=null}
,disable:function(disable){
return flipMethods.setData.call(this,{
disabled:disable}
),this}
}
,cla=function(that,methods,args){
if(args[0]&&"object"!=typeof args[0]){
if(methods[args[0]]&&"_"!=args[0].toString().substr(0,1))return methods[args[0]].apply(that,Array.prototype.slice.call(args,1));
throw args[0]+" is an invalid value"}
return methods.init.apply(that,args)}
;
$.extend($.fn,{
flip:function(){
return cla(this,flipMethods,arguments)}
,turn:function(){
return cla(this,turnMethods,arguments)}
,transform:function(transform,origin){
var properties={
}
;
return origin&&(properties[vendor+"transform-origin"]=origin),properties[vendor+"transform"]=transform,this.css(properties)}
,animatef:function(point){
var data=this.data();
if(data.effect&&clearInterval(data.effect.handle),point){
point.to.length||(point.to=[point.to]),point.from.length||(point.from=[point.from]),point.easing||(point.easing=function(x,t,b,c,data){
return c*Math.sqrt(1-(t=t/data-1)*t)+b}
);
var j,diff=[],len=point.to.length,that=this,fps=point.fps||30,time=-fps,f=function(){
var j,v=[];
for(time=Math.min(point.duration,time+fps),j=0;
len>j;
j++)v.push(point.easing(1,time,point.from[j],diff[j],point.duration));
point.frame(1==len?v[0]:v),time==point.duration&&(clearInterval(data.effect.handle),delete data.effect,that.data(data),point.complete&&point.complete())}
;
for(j=0;
len>j;
j++)diff.push(point.to[j]-point.from[j]);
data.effect=point,data.effect.handle=setInterval(f,fps),this.data(data),f()}
else delete data.effect}
}
),$.isTouch=isTouch}
(jQuery),function(window,jq){
function checkSize(){
winWidth=jq(window).width(),winHeight=jq(window).height(),calcByWidth=1900/1084>winWidth/winHeight,601>winHeight&&(jq("body").addClass("m"),noAnimate=!0)}
function onResize(){
checkSize(),1366>winWidth?jq("#a .info-wrap").addClass("info-wrap-sort"):jq("#a .info-wrap").removeClass("info-wrap-sort"),1e3>winWidth?jq("body").width(1e3):jq("body").css("width","100%");
var screenHeight=winHeight-getTopHeight()-getFooterHeight();
return jq(".screen").height(screenHeight),scrollSize=screenHeight,jq("#fullPage").height(winHeight-getTopHeight()),jq("#scroller").css("top",curIndex*screenHeight*-1),is_mobi&&window.location.search.indexOf("mv=fp")<0?void jq("head").append("<link rel='stylesheet' type='text/css' href='css/ie-fixed.css' />"):(resizeA(screenHeight),void resizeObj(screenHeight))}
function resizeA(screenHeight){
jq(".ani-wrap").height(screenHeight-jq(".info-wrap").height())}
function resizeObj(screenHeight){
for(var _h,w,h,o,objList=jq(".obj"),i=0;
o=objList[i];
i+=1){
o=jq(o);
var ow=o.data("w")||o.attr("width"),oh=o.data("h")||o.attr("height");
if(!isNaN(ow)&&!isNaN(oh)&&(calcByWidth?(h=winWidth*oh/ow*(ow/1900),w=h*ow/oh):(_h=screenHeight*(oh/1060),w=_h*ow/oh,h=w*oh/ow),o.width(w).height(h),"iPad"===o.attr("id"))){
var book=jq("#booksTurn");
book.css({
width:"100%",height:"100%"}
);
try{
book.turn("size",book.width(),book.height())}
catch(e){
}
}
}
}
function onLoad(){
sideNavFunc(),scrollArrowFun(),onResize(),jq("#booksTurn").turn({
width:jq("#books").width(),height:jq("#books").height(),display:"single",duration:1200,turnCorners:"bl,br"}
)}
function sideNavFunc(){
jq(".side-nav-item").each(function(){
var $sideNav=jq("#sideNav"),_self=jq(this),index=jq(this).index();
_self.bind("click",function(){
scrollTo(index),$sideNav.removeClass("side-nav-0 side-nav-1 side-nav-2 side-nav-3 side-nav-4 side-nav-5"),$sideNav.addClass("side-nav-"+index),jq("#sideNav .side-nav-item").removeClass("side-nav-item-cur")}
)}
)}
function scrollArrowFun(){
var $arrowDow=jq(".arrow-down"),$arrowUp=jq(".arrow-up");
$arrowDow.bind("click",function(){
scrollTo(curIndex+1)}
),$arrowUp.bind("click",function(){
scrollTo(curIndex-1)}
)}
function onMouseMove(ev){
if(!noAnimate){
var left=(ev.clientX-.6*winWidth)/(.6*winWidth),top=(ev.clientY-.6*winHeight)/(.6*winWidth),elements=jq(".layer");
elements.each(function(){
var el=jq(this),rate=parseInt(el.data("z")),max=4*(11-rate),toLeft=left*max,toTop=top*max;
el.css("transform","translate("+toLeft+"px,"+toTop+"px)")}
)}
}
function onScroll(ev){
var newTimer=Date.parse(new Date),direction=ev.deltaY<0?-1:1;
if(1e3>newTimer-lastScrollTimer)return!1;
if(direction>0&&0===curIndex)return!1;
if(0>direction&&5===curIndex)return!1;
lastScrollTimer=newTimer;
var toScreen=curIndex-direction;
return scrollTo(toScreen)}
function scrollTo(targetIndex){
if(!(0>targetIndex&&targetIndex>5)){
var distance=targetIndex*scrollSize*-1,direction=targetIndex-curIndex>0?-1:1;
onBeforeScroll(direction),jq("#scroller").animate({
top:distance+"px"}
,900,"easeInOutSine",function(){
curIndex=targetIndex,onAfterScroll(direction)}
)}
}
function onBeforeScroll(){
0===curIndex&&jq(".info-wrap").hide(),(0===curIndex||5===curIndex)&&jq("#footer").hide(),2===curIndex&&2==jq("#booksTurn").turn("page")&&jq("#booksTurn").turn("page",1),jq(".arrow-down,.arrow-up").hide()}
function onAfterScroll(){
var curr=parseInt(curIndex),$sideNav=jq("#sideNav"),$sideNavitem=jq("#sideNav .side-nav-item");
$sideNavitem.removeClass("side-nav-item-cur"),$sideNav.removeClass("side-nav-0 side-nav-1 side-nav-2 side-nav-3 side-nav-4 side-nav-5"),$sideNavitem.eq(curr).addClass("side-nav-item-cur"),$sideNav.addClass("side-nav-"+curr),0===curIndex?(jq(".info-wrap").fadeIn(),jq("#fullPage").addClass("show-a")):jq("#fullPage").removeClass("show-a"),(5===curIndex||0===curIndex)&&jq("#footer").fadeIn(),2===curIndex&&setTimeout(function(){
jq("#booksTurn").turn("page",2)}
,300),3===curIndex&&(setTimeout(function(){
jq("#renwu span").eq(0).addClass("fadeIn")}
,200),setTimeout(function(){
jq("#renwu span").eq(1).addClass("fadeIn")}
,800),setTimeout(function(){
jq("#renwu span").eq(2).addClass("fadeIn")}
,1600),setTimeout(function(){
jq("#renwu span").eq(3).addClass("fadeIn")}
,2e3)),5!==curIndex&&jq(".arrow-down").show(),0!==curIndex&&jq(".arrow-up").show()}
function getFooterHeight(){
return jq("#footer").height()}
function getTopHeight(){
return jq("#header").height()}
var is_mobi=(null!=navigator.userAgent.match(/(iPad|iPod|iPhone)/i),null!=navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i)),lastScrollTimer=0,winWidth=0,winHeight=0,calcByWidth=!0,curIndex=0,scrollSize=0,noAnimate=!1;
jq(function(jq){
jq(window).bind({
load:onLoad,resize:onResize}
),jq("html").hasClass("pages-html")||(jq(document).bind({
mousewheel:onScroll}
),jq("#fullPage").bind({
mousemove:onMouseMove}
),jq(".col").bind({
mouseover:function(){
jq(this).addClass("hover")}
,mouseout:function(){
jq(this).removeClass("hover")}
}
))}
(jq))}
(window,jQuery);
CSS代码(app.min.css):
@font-face{font-family:icomoon;src:url(font/navicon.eot?yrl2ks);src:url(font/navicon.eot?#iefixyrl2ks) format('embedded-opentype'),url(font/navicon.woff?yrl2ks) format('woff'),url(font/navicon.ttf?yrl2ks) format('truetype'),url(font/navicon.svg?yrl2ks#icomoon) format('svg');font-weight:400;font-style:normal}
.s-icon-x,.side-nav-item .s-icon{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1em;font-size:50px;-webkit-font-feature-settings:"liga";-moz-font-feature-settings:"liga=1";-moz-font-feature-settings:"liga";-ms-font-feature-settings:"liga" 1;-o-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@-moz-document url-prefix(){.side-nav-item .s-icon{line-height:1.15}
}
.s-icon-home:before{content:"\e600"}
.s-icon-game:before{content:"\e601"}
.s-icon-literature:before{content:"\e602"}
.s-icon-comic:before{content:"\e603"}
.s-icon-film:before{content:"\e604"}
.s-icon-copyright:before{content:"\e605"}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
select{height:22px;line-height:18px;padding:2px 0}
.hide{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;line-height:0!important;width:1px!important;overflow:hidden}
.hide-txt{font:0/9999px Tahoma;overflow:hidden}
body{font-size:12px;font-family:'Microsoft Yahei','ST Heiti',Tahoma,sans-serif}
html,body{height:100%;overflow:hidden}
a,a:visited{color:#666;text-decoration:none}
.place-hold{height:80px}
#header{height:77px;background:#ededed;width:100%}
.navbar-header{float:left}
.logo{display:block;height:77px;width:277px;background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/logo.png)}
.navbar-nav{float:right;margin-right:0}
.nav-item{float:left}
.nav-item a{display:block;text-decoration:none;font-size:14px;color:#000;font-weight:500;padding:28px 15px}
.nav-item a:hover{background:#000;color:#fff}
#footer{height:80px;overflow:hidden;position:absolute;width:100%;bottom:0;background:#c2c2c2;font-size:116.6666666666667%;color:#2d2d2d;line-height:1.2;z-index:100}
#footer p{padding:30px 0 34px 35px}
#fullPage{position:relative;width:100%;overflow:hidden;*zoom:1}
#scroller{position:absolute;width:100%;height:auto;top:0;left:0;overflow:visible}
.screen{background-position:50% 0;background-repeat:no-repeat;position:relative;*zoom:1;width:100%;max-width:1900px;margin:0 auto;overflow:hidden}
.screen .bg{position:absolute;top:-2%;left:-2%;width:105%;height:105%;background-position:50% 50%;background-repeat:no-repeat;-webkit-background-size:102% 102%;background-size:102% 102%}
.layer{position:absolute}
.z1{z-index:19}
.z2{z-index:18}
.z3{z-index:17}
.z4{z-index:16}
.z5{z-index:15}
.z6{z-index:14}
.z7{z-index:13}
.z8{z-index:12}
.z9{z-index:11}
.z10{z-index:10}
.arrow-down,.arrow-up{cursor:pointer;position:absolute;width:68px;height:35px;left:50%}
.arrow-down{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/app.png) no-repeat;background-position:-56px -108px;margin-left:-34px;bottom:105px}
.arrow-up{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/app.png) no-repeat;background-position:-126px -108px;top:25px;margin-left:-34px;display:none}
.s-desc{font-size:150%;width:29.36842105263158%;line-height:2;color:#fff;left:4.473684210526316%;top:50%}
.s-link{display:block;padding-top:1em}
.s-link a,.s-link a:visited{display:inline-block;*zoom:1;color:#fff;border-bottom:solid 1px #fff;line-height:1.6}
#c .s-link a,#c .s-link a:visited{color:#305d73;border-color:#305d73}
.dbx{width:16.15789473684211%;height:auto;top:-10px;left:15%}
.side-nav{position:fixed;*zoom:1;right:-84px;top:50%;margin-top:-266px;z-index:999}
.side-nav-ul{position:relative;*zoom:1;width:168px;vertical-align:top}
.side-nav-item{display:block;width:100%;height:52px;padding:15px 0;margin:0 0 1px;background-color:#fff;white-space:nowrap}
.side-nav-item:hover,.side-nav-item-cur{margin-left:-84px;background-color:#acb800}
.side-nav-item a{color:#fff;font:400 18px/50px Microsoft YaHei,YouYuan,Arial,\5b8b\4f53,sans-serif}
.side-nav-item a:link,.side-nav-item a:visited{color:#fff}
.s-icon-x,.s-icon{overflow:hidden;display:inline-block;*display:inline;*zoom:1;width:50px;height:50px;margin:0 40px 0 18px;vertical-align:middle}
.s-icon-film,.s-icon-copyright{margin-right:10px}
.side-nav-0 .s-icon{color:#acb800}
.side-nav-0 .side-nav-item:hover,.side-nav-0 .side-nav-item-cur{background-color:#acb800}
.side-nav-1 .s-icon{color:#f67400}
.side-nav-1 .side-nav-item:hover,.side-nav-1 .side-nav-item-cur{background-color:#f67400}
.side-nav-2 .s-icon{color:#73bddc}
.side-nav-2 .side-nav-item:hover,.side-nav-2 .side-nav-item-cur{background-color:#73bddc}
.side-nav-3 .s-icon{color:#616161}
.side-nav-3 .side-nav-item:hover,.side-nav-3 .side-nav-item-cur{background-color:#616161}
.side-nav-4 .s-icon{color:#1541c2}
.side-nav-4 .side-nav-item:hover,.side-nav-4 .side-nav-item-cur{background-color:#1541c2}
.side-nav-5 .s-icon{color:#5f7e00}
.side-nav-5 .side-nav-item:hover,.side-nav-5 .side-nav-item-cur{background-color:#5f7e00}
.side-nav-0 .side-nav-item:hover .s-icon,.side-nav-0 .side-nav-item-cur .s-icon,.side-nav-1 .side-nav-item:hover .s-icon,.side-nav-1 .side-nav-item-cur .s-icon,.side-nav-2 .side-nav-item:hover .s-icon,.side-nav-2 .side-nav-item-cur .s-icon,.side-nav-3 .side-nav-item:hover .s-icon,.side-nav-3 .side-nav-item-cur .s-icon,.side-nav-4 .side-nav-item:hover .s-icon,.side-nav-4 .side-nav-item-cur .s-icon,.side-nav-5 .side-nav-item:hover .s-icon,.side-nav-5 .side-nav-item-cur .s-icon{color:#fff}
.bg-a{background-image:url(http://ossweb-img.qq.com/images/game/ieg/web201404/bg-a.jpg)}
.show-a .arrow-down{bottom:314px}
.sj-1,.js-2,.sj-3,.sj-4{width:0;height:0}
.sj-1{border-style:solid dashed dashed;border-width:65px 65px 0;border-color:#fffc00 transparent transparent}
.sj-2{border-style:dashed dashed solid;border-width:0 55px 55px;border-color:transparent transparent #00a8ff}
.sj-3{border-style:solid dashed dashed;border-width:45px 45px 0;border-color:#69df00 transparent transparent}
.sj-4{border-style:solid dashed dashed;border-width:35px 35px 0;border-color:#ff7200 transparent transparent}
.info-wrap:before,.info-wrap:after{display:block;content:'';height:0!important;line-height:0!important;visibility:hidden}
.info-wrap:after{clear:both}
.info-wrap{position:absolute;width:100%;height:209px;bottom:0;*zoom:1}
.info-wrap .col{float:left;width:358px;height:209px;background:#fff;position:relative;*zoom:1}
.info-wrap .col,.info-wrap .col a{color:#000}
.info-wrap .hover{background:#000}
.info-wrap .hover,.info-wrap .hover a{color:#fff}
.adq1 .adq-label{position:absolute;width:318px;height:60px;bottom:0;background:#000;color:#fff;padding:25px 20px 20px;visibility:hidden}
.hover .adq-label{visibility:visible;left:0}
.adq-title{font-size:150%;display:block;margin-bottom:10px}
.adq-summary{font-size:14px;display:block}
.info-wrap .adq2{width:716px}
.info-wrap-sort .adq2{width:356px;padding-left:20px}
.info-wrap-sort .adq2 .adq-pic{display:none}
.adq2 .adq-pic{float:left;width:337px;height:167px;padding:21px}
#headline{display:block;overflow:hidden;*zoom:1;font-size:14px}
#headline .title,#headline .summary{padding:0 30px 0 6px}
#headline .title{font-size:215%;font-weight:700;padding:28px 30px 16px 6px}
#headline .summary{line-height:2.166666666667}
.info-wrap .news{position:relative;overflow:hidden;*zoom:1;height:181px;background:#f2f2f2;position:relative;*zoom:1;padding:28px 84px 0 35px}
.info-wrap .news-more{position:absolute;width:80px;padding-left:4px;height:58px;top:0;right:0;z-index:2;font-size:14px;line-height:58px;text-align:center;background:#575757;color:#fff}
.info-wrap .news-more:hover{background-color:#000}
.news-table{width:100%;border:0 none}
.news-table td{height:50px;vertical-align:middle}
.news-table .news-point{width:6.97350069735007%;text-align:center}
.news-table .point{display:block;margin:0 auto;width:4px;height:4px;background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/app.png) no-repeat;background-position:-196px -108px;font:0/9999px tahoma,san-serif;overflow:hidden}
.news-table .news-date{width:16.45746164574616%}
.news-table a:hover{color:#00a8ff}
.slogon{width:29.31578947368421%;height:auto;top:23.9%;left:50%;margin:0 0 0 -14.65%}
.slogon-1,.slogon-2,.slogon-3,.slogon-4,.slogon-5{display:block;width:75px;height:75px;top:25.9%}
.slogon-1{background-position:0 0;left:35.36842105263158%}
.slogon-2{background-position:-120px 0;left:41.78947368421053%}
.slogon-3{background-position:-240px 0;left:48.10526315789474%}
.slogon-4{background-position:-361px 0;left:54.42105263157895%}
.slogon-5{background-position:-482px 0;left:60.84210526315789%}
.slogon-1-in,.slogon-2-in,.slogon-3-in,.slogon-4-in,.slogon-5-in{display:block;width:100%;height:100%;background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/slogon.png) no-repeat}
.slogon-1-in{background-position:0 0}
.slogon-2-in{background-position:-120px 0}
.slogon-3-in{background-position:-240px 0}
.slogon-4-in{background-position:-361px 0}
.slogon-5-in{background-position:-482px 0}
#a .sj-1{top:42.6%;left:50%;margin-left:12%}
#a .sj-2{top:27.895%;left:50%;margin-left:-38.42736842105263%}
#a .sj-3{top:16.09737827715356%;left:50%;margin-left:29.47368421052632%}
#a .sj-4{top:5.363295880149813%;left:50%;margin-left:-19.47368421052632%}
#b{background-image:url(http://ossweb-img.qq.com/images/game/ieg/web201404/bg-b.png)}
.b-title{width:15.15789473684211%;height:auto;top:25.73684210526316%;left:4.473684210526316%}
.mask-1{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/roles/middle-mask.png) no-repeat 0 0;top:-.5263157894736842%;left:22.36842105%;width:1500px;height:1080px}
.mask-2{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/roles/top-mask.png) no-repeat 0 0;top:12%;left:58%;width:889px;height:882px}
.role-dzs{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/roles/dzs.png) no-repeat 0 0;width:696px;height:567px;left:36.42105263157895%;top:.027573182247403%}
.role-x5{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/roles/x5.png) no-repeat 0 0;width:256px;height:423px;left:85.10526315789474%;top:4.137865911237016%}
.role-cf{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/roles/cf.png) no-repeat 0 0;width:526px;height:576px;top:52.40793201133144%;left:32.63157894736842%}
.role-lol{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/roles/lol.png) no-repeat 0 0;width:913px;height:835px;top:16.43059490084986%;left:45.57894736842105%}
.role-kp{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/roles/kupao.png) no-repeat 0 0;width:519px;height:537px;top:57.271010387157696%;left:73.86315789473684%}
.lx-1,.lx-2,.lx-3{background-repeat:no-repeat}
.lx-1{background-image:url(http://ossweb-img.qq.com/images/game/ieg/web201404/app.png);background-position:-0px -0px;width:101px;height:106px;top:62.66037735849057%;left:16.57894736842105%}
.lx-2{background-image:url(http://ossweb-img.qq.com/images/game/ieg/web201404/app.png);background-position:-103px -0px;width:101px;height:103px;top:30.11320754716981%;left:27.52631578947368%}
.lx-3{background-image:url(http://ossweb-img.qq.com/images/game/ieg/web201404/app.png);background-position:-0px -108px;width:54px;height:54px;left:21.89473684210526%;top:31.50943396226415%}
.bg-c{background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/bg-c.jpg) no-repeat 50% 50%}
#iPad{padding:0;height:78.49056603773585%;width:56.21052631578947%;right:6.736842105263158%;top:6.36757775683318%}
#books{position:absolute;top:13.70558375634518%;left:9.375%;right:9.375%;bottom:10.27918781725888%;width:auto;height:auto}
#booksTurn{position:relative;width:100%;height:100%}
#booksTurn .page{width:100%;height:100%;position:absolute;top:0;left:0}
.c-title{width:21.10526315789474%;height:auto;top:25.73684210526316%;left:4.473684210526316%}
#c .s-desc{color:#305d73;left:4.473684210526316%;top:50%}
.bg-d{background-image:url(http://ossweb-img.qq.com/images/game/ieg/web201404/bg-d2.jpg)}
#renwu{width:44.791666666666667%;height:70%;left:50%;margin-left:-12.63157894736842%;bottom:0}
.d-title{width:28.73684210526316%;height:auto;left:4.473684210526316%;top:26.60377358490566%}
.light-1{width:auto;height:23.77358490566038%;left:-2%;top:8.490566037735849%}
.light-2{width:11.05263157894737%;height:auto;top:-2%;left:50%;margin-left:-16.31578947368421%}
.light-3{width:18.63157894736842%;height:auto;top:-3.773584905660377%;right:50%;margin-right:-29.57894736842105%}
.light-4{width:14.15789473684211%;right:-3%;top:-2%;height:auto}
.light-5{width:11.26315789473684%;height:auto;right:9.894736842105263%;bottom:-3%}
.light-6{width:16.31578947368421%;height:auto;right:50%;margin-right:-18.94736842105263%;bottom:-3%}
.light-7{width:24.68421052631579%;height:auto;left:17.89473684210526%;bottom:-3%}
.light-8{width:11%;height:auto;left:-2%;bottom:-2%}
.rw-1,.rw-2,.rw-3,.rw-4{position:absolute;left:0;top:0;visibility:hidden}
.cartoon-hand{position:absolute;left:54%;top:4.525%}
.bg-e{background-image:url(http://ossweb-img.qq.com/images/game/ieg/web201404/bg-e.jpg)}
.e-title{width:29.68421052631579%;height:auto;left:4.473684210526316%;top:26.60377358490566%}
.ys-1{height:69.34%;width:auto;top:50%;left:50%;margin-top:-21.89473684210526%;margin-left:-17.73684210526316%}
.ys-2{height:98.68%:width:auto;bottom:-10%;right:50%;margin-right:-32.89473684210526%}
.ys-3{height:15.19%;width:auto;top:50%;right:50%;margin-top:-18.89473684210526%;margin-right:-29.05263157894737%}
.ys-4{height:38.21%;width:auto;bottom:-2.452830188679245%;left:50%;margin-left:-9.210526315789474%}
#f{background:#719600 url(http://ossweb-img.qq.com/images/game/ieg/web201404/bg-f.png) no-repeat 50% 50%}
.f-title{width:31.263157895%;height:auto;left:4.473684210526316%;top:26.60377358490566%}
.svg-1{width:81.052631579%;height:auto;left:-2%;top:-2%}
.svg-2{width:38.421052632%;height:67.924528302%;right:-1.578947368%;top:-2.830188679}
.svg-3{width:19%;height:104.716981132%;top:-2.830188679%;right:-1.578947368%}
.svg-4{width:55.578947368%;height:52.075471698%;bottom:-2.830188679%;left:50%;margin-left:-28.947368421%}
.bq-1{height:53.018867925%;width:auto;top:50%;left:50%;margin-top:-23.789473684%;margin-left:-4.210526316%}
.bq-2{height:53.018867925%;width:auto;top:50%;right:50%;margin-top:-14.526315789%;margin-right:-31.842105263%}
.bq-3{height:48.867924528%;width:auto;right:50%;top:50%;margin-right:-41.263157895%;margin-top:-23.789473684%}
.bq-4{width:18.157894737%;height:30.566037736%;right:8.894736842%;bottom:6.603773585%}
.flx-1{width:5.684210526%;height:10.188679245%;top:34.811320755%;left:28.157894737%}
.flx-2{width:5.684210526%;height:10.188679245%;top:68.396226415%;left:17.631578947%}
.cp-1,.cp-2,.cp-3{width:96.875%;height:90%;top:0;left:27.60416666666667%}
.m .sj-1,.m .sj-2,.m .sj-3,.m .sj-4{display:none!important}
.m .slogon{margin-top:-215px!important;top:50%!important}
.m #a{background-position:50% -140px}
.pages-html,.pages-html body{overflow:visible}
.pages-html{*overflow-y:auto}
.pages-html #header{position:fixed;_position:absolute;z-index:999;left:0;top:0}
.pages-html #footer{position:static}
.pages-html .pages-head{position:fixed;_position:absolute;z-index:999;left:0;top:77px}
.pages-html .navbar-header{padding-left:5.045%;background-color:#fff}
.pages-head{overflow:hidden;position:relative;width:100%;height:70px;background:#1792fa url(http://ossweb-img.qq.com/images/game/ieg/web201404/pages/pages-head.png) repeat-x}
.pages-head-arrow{position:absolute;top:0;left:12.39583333333333%;width:266px;height:70px;background:url(http://ossweb-img.qq.com/images/game/ieg/web201404/pages/pages-head.png) no-repeat 0 -70px}
.pages-wrapper{position:relative;*zoom:1;width:84.81052631578947%;min-height:740px;margin:0 auto;padding-top:200px;padding-bottom:40px;color:#333;font:400 14px Microsoft YaHei,YouYuan,Arial,\5b8b\4f53,sans-serif}
.pages-wrapper p{margin:0 0 1.5em;line-height:1.8em}
.pages-content a:link,.pages-content a:visited{color:#333;text-decoration:none}
.pages-content a:hover{color:#1792fa;text-decoration:none}
.pages-side-nav{position:fixed;_position:absolute;top:170px;left:7.89473684210526%;_left:0;width:178px}
.psn-title{font-size:1.2em;font-weight:700;line-height:2em;border-bottom:3px solid #1390f9}
.psn-ul{padding-top:1em}
.psn-item{font-size:1.2em;line-height:2em}
.psn-item a{color:#333}
.psn-item-current a{color:#1792fa}
.pages-content{margin-left:230px}
.pbox{margin:0 0 4em}
.pbox-hd{overflow:hidden;*zoom:1}
.pbox-hd{margin:0 0 2em}
.pbox-hd-title{font-size:2em}
.pbox-hd-title h4{color:#1792fa;font-weight:700}
.pbox-bd h5{font-size:1.2em;margin:0 0 .5em;font-weight:700}
.pbox-bd h4{font-size:2em;margin:1em 0 .5em;color:#1792fa;font-weight:700}
.pages-film{}
.p-film-list{overflow:hidden;*zoom:1}
.p-film-item{float:left;width:680px;*zoom:1;margin:0 0 2em}
.p-film-list .pic{float:left;margin:0 2em 0 0}
.p-film-list .txt{overflow:hidden;*zoom:1}
.p-film-list .txt dt{font-size:1.5em;margin:0 0 1.5em}
.p-film-list .txt dd{line-height:2em}
.p-theater{}
.p-theater-show{width:100%;margin:0 0 1em}
.p-theater p{margin:0 0 2em}
.p-cartoon-list{overflow:hidden;*zoom:1}
.p-cartoon-item{float:left;width:100%;*zoom:1;margin:0 0 5em}
.p-cartoon-list .pic{float:left;margin:0 2em 0 0}
.p-cartoon-list .txt{overflow:hidden;*zoom:1}
.p-cartoon-list .txt dt{font-size:1.5em;margin:0 0 1.5em}
.p-cartoon-list .txt dd{margin:0 0 2em}
.pages-cooperation{}
.p-cp-list{letter-spacing:-.35em;margin-right:-12px}
.p-cp-item{letter-spacing:normal;font-size:14px;vertical-align:top;display:inline-block;*display:inline;*zoom:1;width:31.5%;margin:0 12px 2em 0}
.p-cp-item img{display:block;margin:0 0 2em}
.p-cp-item h5{font-size:2em;text-align:center}
.p-cp-item h5 a:link,.p-cp-item h5 a:visited{color:#333;font-size:.8em}
.img-fixed{width:100%}
#mallBox .p-cp-item{width:48%}
.pages-master{}
.master-img-1{width:100%;margin:0 0 1em}
.master-img-2{width:100%;margin:0 0 1em}
.pages-news{}
.p-news-list{overflow:hidden;*zoom:1}
.p-news-item{font-size:1.1em;position:relative;overflow:hidden;height:1.8em;line-height:1.8em;margin:0 0 .5em}
.p-news-item .t{display:block}
.p-news-item .d{position:absolute;right:0;top:0;color:#999;padding-left:2em;background-color:#fff}
.p-news-item:hover .d{color:#1792fa}
.p-news-detail{}
.p-news-detail-title{text-align:center;margin:0 0 2em}
.p-news-detail-title h2{font-size:1.4em;font-weight:700}
.p-news-detail-content{line-height:2em;font-size:1.1em}
.p-news-detail .tcenter{text-align:center}
.p-news-detail strong{font-weight:700}
.p-news-detail p{text-indent:2em}
.p-news-detail .img-fixed{text-indent:0}
.pages-agency{}
.agency-img{width:100%;margin:0 0 1em}
.agency-img-video{width:100%;max-width:896px;margin:0 0 1em}
.pages-about .pbox-bd p{text-indent:2em}
.pages-about .pbox-bd ol{margin:0 0 2em;line-height:1.8em;list-style-type:decimal;list-style-position:inside}
.pages-about .pbox-bd li{margin:0 0 1em}
@-webkit-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@-moz-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@-o-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
.fadeIn{visibility:visible;-webkit-animation:fadeIn 1s ease 0s 1 normal;-moz-animation:fadeIn 1s ease 0s 1 normal;-ms-animation:fadeIn 1s ease 0s 1 normal;-o-animation:fadeIn 1s ease 0s 1 normal;animation:fadeIn 1s ease 0s 1 normal}
@-webkit-keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
@-moz-keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
@-o-keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeOut{0%{opacity:1}
100%{opacity:0}
}
.bg-a:before,.fadeOut{-webkit-animation:fadeOut 3s ease 0s 1 normal;-moz-animation:fadeOut 3s ease 0s 1 normal;-ms-animation:fadeOut 3s ease 0s 1 normal;-o-animation:fadeOut 3s ease 0s 1 normal;animation:fadeOut 3s ease 0s 1 normal}
.bg-a{-webkit-animation:css3-scale 8s ease 0s infinite normal;-moz-animation:css3-scale 8s ease 0s infinite normal;-ms-animation:css3-scale 8s ease 0s infinite normal;-o-animation:css3-scale 8s ease 0s infinite normal;animation:css3-scale 8s ease 0s infinite normal}
.bg-a:before{position:absolute;left:0;top:0;content:" ";width:100%;height:100%;background-color:#fff;background-color:transparent\0;opacity:0}
@-webkit-keyframes css3-blur{0%{-webkit-filter:blur(0px)}
70%{-webkit-filter:blur(20px)}
100%{-webkit-filter:blur(0px)}
}
@-moz-keyframes css3-blur{0%{-moz-filter:blur(0px)}
70%{-moz-filter:blur(20px)}
100%{-moz-filter:blur(0px)}
}
@-o-keyframes css3-blur{0%{-o-filter:blur(0px)}
70%{-o-filter:blur(20px)}
100%{-o-filter:blur(0px)}
}
@keyframes css3-blur{0%{filter:blur(0px)}
70%{filter:blur(20px)}
100%{filter:blur(0px)}
}
@-webkit-keyframes css3-scale{0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes css3-scale{0%{-moz-transform:scale(1)}
50%{-moz-transform:scale(1.1)}
100%{-moz-transform:scale(1)}
}
@-o-keyframes css3-scale{0%{-o-transform:scale(1)}
50%{-o-transform:scale(1.1)}
100%{-o-transform:scale(1)}
}
@keyframes css3-scale{0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
.side-nav-item,.side-nav{-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;transition:.3s ease}
@-webkit-keyframes fadeInOut{0%{opacity:1}
70%{opacity:.6}
100%{opacity:1}
}
@-moz-keyframes fadeIn{0%{opacity:1}
70%{opacity:.6}
100%{opacity:1}
}
@-o-keyframes fadeIn{0%{opacity:1}
70%{opacity:.6}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:1}
70%{opacity:.4}
100%{opacity:1}
}
.dbx{-webkit-animation:fadeInOut 3s ease 0s infinite normal;-moz-animation:fadeInOut 3s ease 0s infinite normal;-ms-animation:fadeInOut 3s ease 0s infinite normal;-o-animation:fadeInOut 3s ease 0s infinite normal;animation:fadeInOut 3s ease 0s infinite normal}
.fadeInDown-1{-webkit-animation:fadeInDownBig 1s .2s ease both;-moz-animation:fadeInDownBig 1s .2s ease both}
.fadeInDown-2{-webkit-animation:fadeInDownBig 1s .4s ease both;-moz-animation:fadeInDownBig 1s .4s ease both}
.fadeInDown-3{-webkit-animation:fadeInDownBig 1s .5s ease both;-moz-animation:fadeInDownBig 1s .5s ease both}
.fadeInDown-4{-webkit-animation:fadeInDownBig 1s .7s ease both;-moz-animation:fadeInDownBig 1s .7s ease both}
@-webkit-keyframes fadeInDownBig{0%{opacity:0;margin-top:-1000px}
80%{opacity:1;margin-top:20px}
100%{opacity:1;margin-top:0}
}
@-moz-keyframes fadeInDownBig{0%{opacity:0;margin-top:-1000px}
80%{opacity:1;margin-top:20px}
100%{opacity:1;margin-top:0}
}
.fadeInScale-1{-webkit-animation:fadeInScale 1s .6s ease both;-moz-animation:fadeInScale 1s .6s ease both}
.fadeInScale-2{-webkit-animation:fadeInScale 1s .8s ease both;-moz-animation:fadeInScale 1s .8s ease both}
.fadeInScale-3{-webkit-animation:fadeInScale 1s 1s ease both;-moz-animation:fadeInScale 1s 1s ease both}
.fadeInScale-4{-webkit-animation:fadeInScale 1s 1.2s ease both;-moz-animation:fadeInScale 1s 1.2s ease both}
.fadeInScale-5{-webkit-animation:fadeInScale 1s 1.4s ease both;-moz-animation:fadeInScale 1s 1.4s ease both}
@-webkit-keyframes fadeInScale{0%{opacity:0;-webkit-transform:scale(1.8)}
100%{opacity:1;-webkit-transform:scale(1)}
}
@-moz-keyframes fadeInScale{0%{opacity:0;-moz-transform:scale(1.8)}
100%{opacity:1;-moz-transform:scale(1)}
}
分享到QQ
分享到微博
微信扫一扫
