经验分享程序开发文档资料数据资源其它资源

jQuery全屏内嵌焦点图轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全屏内嵌焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery全屏内嵌焦点图轮播滚动切换特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="robots" content="all">
	<title>jQuery全屏内嵌焦点图</title>
	<link href="style/style.css" rel="stylesheet" type="text/css">
    <!--[if IE 6]>
 <script src="scripts/DD_belatedPNG_0.0.8a.js"></script>
 <script>
   /* EXAMPLE */
   DD_belatedPNG.fix('*');
   
   /* string argument can be any CSS selector */
   /* .png_bg example is unnecessary */
   /* change it to what suits you! */
 </script>
 <![endif]--> 
</head>
<body>
<div class="outer">
	<div class="toper">
		<div class="toper-inner">
            <ul class="menu cfix" id="menu">
                <li class="menu-intro">
                    <a class="curr" title="游戏简介" href="#intro"><span>游戏简介</span></a>
                </li>
                <li class="menu-feature">
                    <a title="游戏特色" href="#feature"><span>游戏特色</span></a>
                </li>
            	<li class="menu-guide">
            		<a title="游戏指南" href="#guide"><span>游戏指南</span></a>
            	</li>
                <li class="logo_li"><a href="default.htm" class="logo"></a></li>
        	</ul>
		</div>
	</div>
<!--wrap1-->    
    <div id="wrap-page0" class="wrap wrap-intro">
        <div id="wrapinner-page0" class="wrap-intro-inner">
            <div id="mainer2-page0" class="mainer2">
                 <p id="introImg" class="intro-img cfix zbc">
                    <a class="fl imgs-lnk" href="javascript:imgshow('introImg',0)" title=""><img src="img/pic/intro-pic1.jpg" alt=""><span class="sbg wx" id="span_1_0"></span></a>
                    <a class="fl imgs-lnk" href="javascript:imgshow('introImg',1)" title=""><img src="img/pic/intro-pic2.jpg" alt=""><span class="sbg wx" id="span_1_1"></span></a>
                </p>
                <div class="intro_text">
                	<h2>游戏简介</h2>
                    <p>《行星边际2》是一款顶级画面体验的战争MMOFPS射击游戏大作，游戏采用索尼在线娱乐（SOE）最新ForgeLight&#8482;游戏引擎制作，在射击游戏同图承载人数上取得了技术性突破，数以千计的玩家将能够同时在一张地图世界内展开战斗玩家可同自己的好友或公会携手共赴战场。</p>
                </div>
            </div>
        </div>
    </div>
<!--wrap2--> 
    <div id="wrap-page1" class="wrap wrap-feature">
        <div id="wrapinner-page1" class="wrap-feature-inner">
            <div id="mainer2-page1" class="mainer2">
            	 <div class="feature_text">
                 	<h2>游戏特色</h2>
                    <p> 不同于传统FPS对战类游戏，《行星边际2》的战争将在一幅开放性无缝连接<span class="cBlue">世界地图</span>内展开，玩家<span class="cBlue">不需要加入或建立房间</span>进行游戏。</p>
                 </div>
                 <div class="feature_text2">
                 	<h3>《行星边际2》作为一款全新的MMOFPS游戏，将包含以下特性：</h3>
                    <p>1. 地图面积达到<span class="cBlue">64平</span>方公里，最多可以<span class="cBlue">支持2000</span>名玩家在一个地图内进行战斗<br />
2. 三大阵营全面领土战争：地球共和国 vs 新联邦 vs 瓦努主权国<br />
3. <span class="cBlue">6大</span>步兵职业，可在游戏内可随意切换。<br />
4. <span class="cBlue">12</span>种陆空战争载具<br />
5. <span class="cBlue">数百种</span>武器+<span class="cBlue">近千种</span>升级配件</p>
                 </div>
                 <p id="featureImg" class="feature-img s-img cfix zbc">
                    <a class="fl imgs-lnk" href="javascript:imgshow('featureImg',0)" title=""><img src="img/pic/feature-pic1.jpg" alt=""><span class="sbg wx" id="span_1_2"></span></a>
                    <a class="fl imgs-lnk" href="javascript:imgshow('featureImg',1)" title=""><img src="img/pic/feature-pic2.jpg" alt=""><span class="sbg wx" id="span_1_3"></span></a>
                    <a class="fl imgs-lnk" href="javascript:imgshow('featureImg',2)" title=""><img src="img/pic/feature-pic3.jpg" alt=""><span class="sbg wx" id="span_1_4"></span></a>
                </p>
            </div>
        </div>
    </div>
<!--wrap3-->
    <div id="wrap-page2" class="wrap wrap-guide">
        <div id="wrapinner-page2" class="wrap-guide-inner">
            <div id="mainer2-page2" class="mainer2">
                <div class="guideBox">
                    <div id="guideInner" class="guideInner">
                        <div class="gride grideCon1">
                           <div class="conInner">
                           		<h2>战争目标</h2>
                                <h3>三阵营全面领土争夺战</h3>
                                <p class="tx">《行星边际2》的核心游戏内容是对关键地域的争夺，以及稀有资源的控制。每处战场都包含着价值昂贵的资源以及战略上的必争之地。</p>
     							<p class="tx">征服并占领这些地域的势力，将获得额外的资源和弹药，并在技术研究中处于优势，可在游戏内更快的获取证书训练点数，通过证书点玩家可以更快的解锁新武器。</p>
                           </div>
                        </div>
                        <div class="gride grideCon2">
                            <div class="conInner">
                           		<h2>加入战场</h2>
                                <p class="tx">       进入游戏后，按"M"键打开游戏战略地图，可在此界面玩家可以查看当前大陆的战争状态，并通过界面左下方的"快速加入战场"按钮直接空投至战斗最激烈的战场。<br />
除了轨道空投外，玩家还可以通过右上方的地图控制板手动寻找战场，并通过鼠标右键地图上任意一点，设定个人或小队路标，这样在主视角HUD界面内便可以跟随这些路标到达指定战场。</p>
								<div class="text2">
                                	<p>游戏中还提供11种陆空载具供玩家驾驶。</p>
                                	<p>玩家在载具终端内可以领取载具，驾驶它们便可快速到达战场，并且能够向友军提供强大的战场火力。按"E"键可进出载具或防御装置。</p>
                                </div>
                                <p id="guideImg" class="guide-img s-img cfix zbc">
                   					 <a class="fl imgs-lnk" href="javascript:imgshow('guideImg',0)" title=""><img src="img/pic/feature-pic8.jpg" alt=""><span class="sbg wx" id="span_1_5"></span></a>
                				</p>
                           </div>
                        </div>
                        <div class="gride grideCon3">
                            <div class="conInner">
                           		<h2>战场生存必备知识</h2>
                                <div class="rec">
                                	<h3>敌我识别：</h3>
                                	<p>游戏内默认设置友军顶部为蓝色倒三角标记<span><img src="img/p3_arr1.png" width="34" height="30" alt="arr" /></span>，敌军顶部为红色倒三角标记<span><img src="img/p3_arr2.png" width="34" height="30" alt="arr" /></span><br />如果发现敌军单位，请按"<span class="cBlue b">Q</span>"键报告敌人方位，进行标记，如果敌人尚未被附近任何友军报告位置的情况下，则头顶无任何标记。</p>
                                </div>
                                <div class="rec2">
                                	<h3>复活重生：</h3>
                                    <p>玩家在战斗中死亡后，可以在地图界面选择附近友军控制的重生装置内复活</p>
                                </div>
                                <div class="rec3 cfix">
                                    <div class="tx2 fl">
                                    	<div class="cell">
                                            <h3>更换职业武器:</h3>
                                            <p>除了重生部署界面外，玩家还可以在游戏中寻找武器终端，以便随时更换职业和武器装备。</p>
                                        </div>
                                    </div>
                                    <div class="tx2 fl">
                                    	<div class="cell">
                                        	<h3>游戏中设施图标作用:</h3>
                                       	</div>
                                    </div>
                                    <p id="con3Img" class="con3Img-img s-img cfix zbc">
                   					 <a class="fl imgs-lnk" href="javascript:imgshow('con3Img',0)" title=""><img src="img/pic/gride-pic1.jpg" alt=""><span class="sbg wx" id="span_1_7"></span></a>
                   					 <a class="fl imgs-lnk" href="javascript:imgshow('con3Img',1)" title=""><img src="img/pic/gride-pic2.jpg" alt=""><span class="sbg wx" id="span_1_8"></span></a>
                					</p>
                                </div>
                           </div>
                        </div>
                    </div>
                 </div>
                <ul id="guideNav" class="guideNav cfix">
                    <li class="guide_tab1"><a href="#" class="curr"><span>战争目标</span></a></li>
                    <li class="guide_tab2"><a href="#"><span>加入战场</span></a></li>
                    <li class="guide_tab3"><a href="#"><span>战场生存必备知识</span></a></li>
                </ul>
            </div>
        </div>
    </div>
	<a id="prevLink" class="prev-lnk" href="#happy" title="向左" style="display:none">&nbsp;</a>
	<a id="nextLink" class="next-lnk" href="#happy" title="向右">&nbsp;</a>
</div>
<div class="popup" id="popImg">
	<div class="popinner"><p id="popImgBox"></p></div>
	<a title="关闭" href="javascript:hidDialogs();" class="popclose">×</a>
	<a title="上一张" href="javascript:;" class="pop-prev" id="popPrev">&nbsp;<span>已是第一张</span></a>
	<a title="下一张" href="javascript:;" class="pop-next" id="popNext">&nbsp;<span>最后一张了</span></a>
</div>

</div>
<script src="scripts/milo-min_zbc.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script src="scripts/page_zbc.js"></script>
<script>
var showDialogs=function(o){
	need("biz.dialog",function(Dialog){
		Dialog.show({
		id:o,
		bgcolor:"#000",
		opacity:60
		});
	});
	return;
},
hidDialogs=function(){
	need("biz.dialog",function(Dialog){Dialog.hide();});return;
};
	
milo.ready(function(){
	swap("guideNav");
	
	loadScript("scripts/tcss_ied.js",function(){
		glb.hash.init("Page");
		if(typeof(pgvMain) == 'function'){pgvMain();}
	});
	
	
});
$(function(){
	//图片按钮
	$(".wx").animate({opacity:0},"fast");
	$(".zbc span").mouseenter(function(){
		$(this).stop().fadeTo('slow',0.7);
	}).mouseleave(function(){
		$(this).stop().fadeTo('slow',0);
	});			
})
</script>
</body>
</html>

JS代码(page_zbc.js):

var glb={
	tag:function(p,o){
	return p.getElementsByTagName(o);
}
,now:0,hash:{
	last:"",get:function(){
	return window.location.hash.replace(/[^a-zA-Z0-9_-]/g,'')||(window.location.href.indexOf("#")>-1?"":"index");
}
,init:function(scope){
	var that=this,hdl=window[scope],fx=function(){
	var h=that.get(),arr=h.split("-");
	if(h&&that.last!=h&&hdl[arr[0]]){
	hdl[arr[0]](arr[1],arr[2],arr[3]);
	that.last=h;
}
}
;
	hdl["init"]?hdl["init"]():0;
	setInterval(fx,60);
}
}
}
,move = function(vid,e,cnt,sty){
	var ab={
	obj:g(vid),mlen:cnt}
,nowtop=e*ab.mlen,af={
	mv:function(t,b,c,d){
	return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,run:function(t,b,c,d){
	t++;
	(sty=="top")?(ab.obj.style.top = -Math.ceil(af.mv(t,b,c,d)) + "px"):(ab.obj.style.left = -Math.ceil(af.mv(t,b,c,d)) + "px");
	if (t < d){
	setTimeout(function(){
	af.run(t,b,c,d)}
,10);
}
}
,go:function(){
	var b,c;
	(sty=="top")?(b = Math.abs(parseInt(ab.obj.style.top))):(b = Math.abs(parseInt(ab.obj.style.left)));
	if (!b){
	b = 0}
;
	c = nowtop - b;
	af.run(0,b,c,40);
}
}
,s=af.go();
}
,movebg = function(vid,pre,nx,y){
	var ab={
	obj:g(vid),nownum:1}
,af={
	mv:function(t,b,c,d){
	(pre>nx)?"":ab.nownum=-1;
	return (t==d) ? b+c:c * (ab.nownum*Math.pow(2,-10 * t/d) + 1) + b;
}
,run:function(t,b,c,d){
	t++;
	(y==0)?(ab.obj.style.backgroundPosition = Math.ceil(af.mv(t,b,c,d)) + "% 0"):(ab.obj.style.backgroundPosition = Math.ceil(af.mv(t,b,c,d)) + "% 380px");
	if (t < d){
	setTimeout(function(){
	af.run(t,b,c,d)}
,10);
}
}
}
,s=af.run(-25,0,50,25);
}
,emove=function(e,v){
	var sw = glb.tag(g("menu"),"a");
	sw[e].className = "";
	sw[v].className = "curr";
	g("wrap-page"+e).style.display="none";
	g("wrap-page"+v).style.display="block";
	g("mainer2-page"+v).style.left="-1000px";
	movebg("wrap-page"+v,e,v,0);
	movebg("wrapinner-page"+v,e,v,1);
	move("mainer2-page"+v,1,0,"left");
	if(v==0){
	g("prevLink").style.display="none";
}
else{
	g("prevLink").style.display="block";
}
if(v==2){
	g("nextLink").style.display="none";
}
else{
	g("nextLink").style.display="block";
}
pgvSendClick({
	hottag:'act.a20130425aram.menu.page'+v}
);
}
,swap=function(o){
	var sw = glb.tag(g(o),"a"),ordin=0;
	len=sw.length;
	for (var i = len;
	i--;
	){
	sw[i].count = i;
	sw[i].onclick = function(){
	sw[ordin].className = "";
	sw[this.count].className = "curr";
	move("guideInner",this.count,660,"top");
	ordin=this.count;
	return false;
}
;
}
g("prevLink").onclick=function(){
	if(glb.now>0){
	emove(glb.now,glb.now-1);
	glb.now--;
}
pgvSendClick({
	hottag:'act.a20130425aram.move.prevlink'}
);
}
g("nextLink").onclick=function(){
	if(glb.now<2){
	emove(glb.now,glb.now+1);
	glb.now++;
}
pgvSendClick({
	hottag:'act.a20130425aram.move.nextlink'}
);
}
}
,showd=function(o){
	need("biz.dialog",function(Dialog){
	Dialog.show({
	id:o,bgcolor:"#000",isNoAccessible:true,opacity:90}
);
}
);
}
,/*hidDialogs=function(){
	g("popVodBox").innerHTML="";
	need("biz.dialog",function(Dialog){
	Dialog.hide();
}
);
	return;
}
,*/
/*videoPlayer=function(){
	showd('popVod');
	var video = new tvp.VideoInfo();
	video.setVid("u0012stjkh2");
	var player = new tvp.Player(763,474);
	player.setCurVideo(video);
	player.addParam("adplay","0");
	player.addParam("flashskin","http://imgcache.qq.com/minivideo_v1/vd/res/skins/TencentPlayerMiniSkin.swf");
	player.write("popVodBox");
	pgvSendClick({
	hottag:'act.a20130425aram.video'}
);
}
,*/
imgshow=function(o,cnt){
	var ma = glb.tag(g(o),"a"),mg = glb.tag(g(o),"img"),ordin=0,ssrc,surl,put=function(c){
	g("popPrev").className="pop-prev";
	g("popNext").className="pop-next";
	ssrc=mg[c].getAttribute("src");
	surl=ssrc.split(".jpg")[0];
	g("popImgBox").innerHTML='<img src="'+surl+'-big.jpg" width="760" height="580">';
	ordin=c;
}
;
	showd("popImg");
	put(cnt);
	g("popPrev").onclick=function(){
	if(ordin>0){
	put(ordin-1);
}
else{
	this.className="pop-prev pop-not";
}
}
g("popNext").onclick=function(){
	if(ordin<ma.length-1){
	put(ordin+1)}
else{
	this.className="pop-next pop-not";
}
}
}
,Page ={
	"intro":function(){
	emove(glb.now,0);
	glb.now = 0;
}
,"feature":function(){
	emove(glb.now,1);
	glb.now = 1;
}
,"guide":function(){
	emove(glb.now,2);
	glb.now = 2;
}
,"happy":function(){
}
}
;
	/* |xGv00|285619eef3133bbd3ec91cd061a01690 */

JS代码(tcss_ied.js):

(function(){
	var _d,_l,_b,_n="-",_params,_curDomain,_curUrl,_domainToSet,_refDomain,_refUrl,_image,_ver="ied3.0.2";
	if(typeof(_rep)=="undefined"){
	var _rep=1}
function tcss(params){
	this.url=[];
	this.init(params)}
tcss.prototype={
	init:function(params){
	params?_params=params:_params={
}
;
	_d=document;
	if(!(_params.statIframe)){
	if(window!=top){
	try{
	_d=top.document}
catch(e){
}
}
}
_l=_d.location;
	_b=_d.body;
	_tt=[]}
,run:function(){
	var bt,et,ext;
	bt=new Date().getTime();
	_cookie.init();
	this.url.push(this.getDomainInfo());
	this.url.unshift("http://pingfore."+_domainToSet+"/pingd?");
	this.url.push(this.getRefInfo(_params));
	try{
	if(navigator.cookieEnabled){
	this.url.push("&pvid="+_cookie.setCookie("pgv_pvid",true))}
else{
	this.url.push("&pvid=NoCookie")}
}
catch(e){
	this.url.push("&pvid=NoCookie")}
this.url.push(this.getMainEnvInfo());
	this.url.push(this.getExtendEnvInfo());
	this.url.push("&vs="+_ver);
	if(_params.userDefineVariable){
	this.url.push(_udv.setv(_params.userDefineVariable))}
else{
	this.url.push(_udv.setv())}
_cookie.setCookie("ssid");
	_cookie.save();
	if(_params.originalReferer){
	this.url.push("&or="+_params.originalReferer)}
et=new Date().getTime();
	_params.extParam?ext=_params.extParam+"|":ext="";
	this.url.push("&ext="+escape(ext+(et-bt)));
	this.url.push("&reserved1="+escape(_params.reserved1Param||""));
	this.url.push("&rand="+Math.round(Math.random()*100000));
	var su=this.getSud();
	if(su){
	_tt.push("su="+escape(su.substring(0,256)))}
this.url.push("&tt="+escape(_tt.join(";
	")));
	this.sendInfo(this.url.join(""));
	if(_params.hot){
	if(document.attachEvent){
	document.attachEvent("onclick",function(event){
	pgvWatchClick(event)}
)}
else{
	document.addEventListener("click",function(event){
	pgvWatchClick(event)}
,false)}
}
if(_params.repeatApplay&&_params.repeatApplay=="true"){
	if(typeof(_rep)!="undefined"){
	_rep=1}
}
}
,getSud:function(){
	if(_params.sessionUserType){
	return _params.sessionUserType}
var sudParamName=_params.sudParamName||"sessionUserType";
	var sud=this.getParameter(sudParamName,_d.URL);
	return sud}
,getDomainInfo:function(hot){
	var dm,url;
	_curDomain=dm=_params.virtualDomain||_l.host;
	dm=_curDomain.toLowerCase();
	if(!_domainToSet){
	_domainToSet=this.getCookieSetDomain()}
if(hot){
	var pl=dm.indexOf(":");
	if(pl>-1){
	dm=dm.substr(0,pl)+".hot"+dm.substr(pl)}
else{
	dm+=".hot"}
}
url=this.getCurrentUrl();
	return("dm="+dm+"&url="+url)}
,getCurrentUrl:function(){
	var url="";
	var arg=_n;
	if(_params.virtualURL){
	url=_params.virtualURL}
else{
	url=_curUrl=escape(_l.pathname);
	if(_l.search!=""){
	arg=escape(_l.search.substr(1))}
if(_params.senseParam){
	var value=this.getParameter(_params.senseParam,_d.URL);
	if(value){
	url+="_"+value}
}
}
return url+"&arg="+arg}
,getRefInfo:function(params){
	var refdm=_n,refurl=_n,refarg=_n,refStr=_d.referrer,tagParamName,adtag,pos;
	var virtualDomain=params.virtualDomain?params.virtualDomain:_n;
	var virtualURL=params.virtualURL?params.virtualURL:_n;
	_refDomain=params.virtualRefDomain?params.virtualRefDomain:"";
	_refUrl=params.virtualRefURL?params.virtualRefURL:"";
	if(params.statIframe||params.useCookie=="true"){
	refStr=_cookie.get("pgvReferrer=");
	var newRef=_d.URL;
	var paraPos=newRef.indexOf("?");
	if(paraPos>-1){
	newRef=newRef.substr(0,paraPos)}
_cookie.set("pgvReferrer",newRef)}
else{
	if(params.useCookie=="set"&&_refDomain!=""&&_refUrl!=""){
	var newRef=(("https:"==_l.protocol)?"https@/":"http://");
	newRef+=_refDomain+refUrl;
	_cookie.set("pgvReferrer",newRef)}
else{
	if(params.useCookie=="set"&&(virtualDomain!=_n||virtualURL!=_n)){
	var newRef=(("https:"==_l.protocol)?"https@/":"http://");
	newRef+=virtualDomain==_n?_curDomain:virtualDomain;
	newRef+=virtualURL==_n?_curUrl:virtualURL;
	_cookie.set("pgvReferrer",newRef)}
else{
	if(params.useCookie=="get"){
	var oldRef=_cookie.get("pgvReferrer=");
	if(oldRef!=""){
	refStr=oldRef}
_cookie.set("pgvReferrer","")}
else{
	_cookie.set("pgvReferrer","")}
}
}
}
tagParamName=params.tagParamName||"ADTAG";
	adtag=this.getParameter(tagParamName,_d.URL);
	if(adtag){
	refdm="ADTAG";
	refurl=adtag}
pos=refStr.indexOf("://");
	if(pos>-1&&refdm==_n){
	var re=/(\w+):\/\/([^\:|\/]+)(\:\d*)?(.*\/)([^#|\?|\n]+)?(#.*)?(\?.*)?/i;
	var arr=refStr.match(re);
	if(arr){
	refdm=arr[2];
	refurl=arr[4]+arr[5]}
}
if(refStr.indexOf("?")!=-1){
	var pos=refStr.indexOf("?")+1;
	refarg=refStr.substr(pos)}
if(_refDomain!=""&&params.useCookie=="false"){
	refdm=_refDomain}
if(_refUrl!=""&&params.useCookie=="false"){
	refurl=_refUrl}
_refDomain=refdm;
	_refUrl=escape(refurl);
	var c=_n,q=_n;
	c=_cookie.get("ied_rf=",true);
	q=_cookie.get("ied_qq=",true);
	if((c==_n)||(refdm=="ADTAG")||("--"==c)||(c.indexOf("ADTAG")==-1)&&(refdm!=_n)){
	var a=refdm+refurl;
	if(a.length>128){
	a=a.substring(0,128)}
c=a;
	var r=new Date();
	r.setDate(r.getDate()+1);
	r.setHours(r.getHours()-r.getHours());
	r.setMinutes(r.getMinutes()-r.getMinutes());
	r.setSeconds(r.getSeconds()-r.getSeconds());
	var o="ied_rf="+c+";
	path=/;
	domain="+this.getCookieSetDomain(true)+";
	expires="+r.toGMTString();
	_d.cookie=o}
return("&rdm="+_refDomain+"&rurl="+_refUrl+"&rarg="+escape(refarg)+"&ied_rf="+c+"&ied_qq="+q)}
,getMainEnvInfo:function(){
	var ret="";
	try{
	var scr=_n,scl=_n,lang=_n,cpuc=_n,pf=_n,tz=_n,java=0,n=navigator;
	if(self.screen){
	scr=screen.width+"x"+screen.height;
	scl=screen.colorDepth+"-bit"}
if(n.language){
	lang=n.language.toLowerCase()}
else{
	if(n.browserLanguage){
	lang=n.browserLanguage.toLowerCase()}
}
java=n.javaEnabled()?1:0;
	cpuc=n.cpuClass;
	pf=n.platform;
	tz=new Date().getTimezoneOffset()/60;
	ret="&scr="+scr+"&scl="+scl+"&lang="+lang+"&java="+java+"&cc="+cpuc+"&pf="+pf+"&tz="+tz}
catch(e){
}
finally{
	return ret}
}
,getExtendEnvInfo:function(){
	var ret="";
	try{
	var flash,currentUrl=_l.href,connectType=_n;
	ret+="&flash="+this.getFlashInfo();
	if(_b.addBehavior){
	_b.addBehavior("#default#homePage");
	if(_b.isHomePage(currentUrl)){
	ret+="&hp=Y"}
}
if(_b.addBehavior){
	_b.addBehavior("#default#clientCaps");
	connectType=_b.connectionType}
ret+="&ct="+connectType}
catch(e){
}
finally{
	return ret}
}
,getFlashInfo:function(){
	var f=_n,n=navigator;
	try{
	if(n.plugins&&n.plugins.length){
	for(var i=0;
	i<n.plugins.length;
	i++){
	if(n.plugins[i].name.indexOf("Shockwave Flash")>-1){
	f=n.plugins[i].description.split("Shockwave Flash ")[1];
	break}
}
}
else{
	if(window.ActiveXObject){
	for(var i=12;
	i>=5;
	i--){
	try{
	var fl=eval("new ActiveXObject('ShockwaveFlash.ShockwaveFlash."+i+"');
	");
	if(fl){
	f=i+".0";
	break}
}
catch(e){
}
}
}
}
}
catch(e){
}
return f}
,getParameter:function(name,src){
	if(name&&src){
	var r=new RegExp("(\\?|#|&)"+name+"=([^&^#]*)(#|&|$)");
	var m=src.match(r);
	return m?m[2]:""}
return""}
,getCookieSetDomain:function(isSubDomain){
	var dotlen,pos,domainToSet,dot=[],j=0;
	for(var i=0;
	i<_curDomain.length;
	i++){
	if(_curDomain.charAt(i)=="."){
	dot[j]=i;
	j++}
}
dotlen=dot.length;
	pos=_curDomain.indexOf(".cn");
	if(pos>-1){
	dotlen--}
domainToSet="qq.com";
	if(dotlen==1){
	domainToSet=_curDomain}
else{
	if(dotlen>1){
	domainToSet=_curDomain.substring(dot[dotlen-2]+1)}
}
if(isSubDomain){
	switch(dotlen){
	case 1:case 2:domainToSet=_curDomain;
	break;
	default:domainToSet=_curDomain.substring(dot[dotlen-3]+1);
	break}
}
return domainToSet}
,watchClick:function(e){
	try{
	var istag=true,hottag="",srcElement;
	srcElement=window.event?window.event.srcElement:e.target;
	switch(srcElement.tagName){
	case"A":hottag="<A href="+srcElement.href+">"+srcElement.innerHTML+"</a>";
	break;
	case"IMG":hottag="<IMG src="+srcElement.src+">";
	break;
	case"INPUT":hottag="<INPUT type="+srcElement.type+" value="+srcElement.value+">";
	break;
	case"BUTTON":hottag="<BUTTON>"+srcElement.innerText+"</BUTTON>";
	break;
	case"SELECT":hottag="SELECT";
	break;
	default:istag=false;
	break}
if(istag){
	var t=new tcss(_params);
	var pos=t.getElementPos(srcElement);
	if(_params.coordinateId){
	var coordinatePos=t.getElementPos(document.getElementById(_params.coordinateId));
	pos.x-=coordinatePos.x}
t.url.push(t.getDomainInfo(true));
	t.url.push("&hottag="+escape(hottag));
	t.url.push("&hotx="+pos.x);
	t.url.push("&hoty="+pos.y);
	t.url.push("&rand="+Math.round(Math.random()*100000));
	t.url.unshift("pinghot./"+_domainToSet+"/pingd?");
	t.sendInfo(t.url.join(""))}
}
catch(ex){
}
}
,getElementPos:function(el){
	if(el.parentNode===null||el.style.display=="none"){
	return false}
var ua=navigator.userAgent.toLowerCase(),parent=null,pos=[],box;
	if(el.getBoundingClientRect){
	var scrollTop,scrollLeft,clientTop,clientLeft;
	box=el.getBoundingClientRect();
	scrollTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
	scrollLeft=Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
	clientTop=document.body.clientTop;
	clientLeft=document.body.clientLeft;
	return{
	x:box.left+scrollLeft-clientLeft,y:box.top+scrollTop-clientTop}
}
else{
	if(document.getBoxObjectFor){
	box=document.getBoxObjectFor(el);
	var borderLeft=(el.style.borderLeftWidth)?Math.floor(el.style.borderLeftWidth):0;
	var borderTop=(el.style.borderTopWidth)?Math.floor(el.style.borderTopWidth):0;
	pos=[box.x-borderLeft,box.y-borderTop]}
else{
	pos=[el.offsetLeft,el.offsetTop];
	parent=el.offsetParent;
	if(parent!=el){
	while(parent){
	pos[0]+=parent.offsetLeft;
	pos[1]+=parent.offsetTop;
	parent=parent.offsetParent}
}
if(ua.indexOf("opera")>-1||(ua.indexOf("safari")>-1&&el.style.position=="absolute")){
	pos[0]-=document.body.offsetLeft;
	pos[1]-=document.body.offsetTop}
}
}
if(el.parentNode){
	parent=el.parentNode}
else{
	parent=null}
while(parent&&parent.tagName!="BODY"&&parent.tagName!="HTML"){
	pos[0]-=parent.scrollLeft;
	pos[1]-=parent.scrollTop;
	if(parent.parentNode){
	parent=parent.parentNode}
else{
	parent=null}
}
return{
	x:pos[0],y:pos[1]}
}
,sendClick:function(){
	if(_params.hottag){
	this.url.push(this.getDomainInfo(true));
	this.url.push("&hottag="+escape(_params.hottag));
	this.url.push("&hotx=9999&hoty=9999");
	this.url.push("&rand="+Math.round(Math.random()*100000));
	this.url.unshift("pinghot./"+_domainToSet+"/pingd?");
	this.sendInfo(this.url.join(""))}
}
,sendInfo:function(url){
	_image=new Image(1,1);
	_image.src=url}
}
;
	var _udv={
	vscope:{
	page:3,session:2,user:1}
,setv:function(tuple){
	var params="";
	var val="";
	if(!tuple||!tuple.name||tuple.name==""||!tuple.value||tuple.value==""||!tuple.scope||tuple.scope<1||tuple.scope>3){
	val=_cookie.get("custvar=")==_n?_cookie.get("custvar=",true):_cookie.get("custvar=");
	params="&custvar="+val}
else{
	var val=tuple.name+":"+tuple.value;
	switch(tuple.scope){
	case this.vscope.page:break;
	case this.vscope.session:_cookie.setCookie("custvar",false,val);
	break;
	case this.vscope.user:_cookie.setCookie("custvar",true,val);
	break}
params="&custvar="+val}
return params}
}
;
	var _cookie={
	sck:[],sco:{
}
,init:function(){
	var value=this.get("pgv_info=",true);
	if(value!=_n){
	var arr=value.split("&");
	for(var i=0;
	i<arr.length;
	i++){
	var arr2=arr[i].split("=");
	this.set(arr2[0],unescape(arr2[1]))}
}
}
,get:function(name,isend){
	var cookies=isend?_d.cookie:this.get("pgv_info=",true);
	var value=_n;
	var offset,end;
	offset=cookies.indexOf(name);
	if(offset>-1){
	offset+=name.length;
	end=cookies.indexOf(";
	",offset);
	if(end==-1){
	end=cookies.length}
if(!isend){
	var end2=cookies.indexOf("&",offset);
	if(end2>-1){
	end=Math.min(end,end2)}
}
value=cookies.substring(offset,end)}
return value}
,set:function(key,value){
	this.sco[key]=value;
	var isExist=false;
	var sckLen=this.sck.length;
	for(var i=0;
	i<sckLen;
	i++){
	if(key==this.sck[i]){
	isExist=true;
	break}
}
if(!isExist){
	this.sck.push(key)}
}
,setCookie:function(name,isend,value){
	var id=_cookie.get(name+"=",isend);
	if(id==_n&&!value){
	isend?id="":id="s";
	var curDate=new Date();
	var curMs=curDate.getUTCMilliseconds();
	id+=(Math.round(Math.abs(Math.random()-1)*2147483647)*curMs)%10000000000}
else{
	id=value?value:id}
if(isend){
	this.saveCookie(name+"="+id,"expires=Sun,18 Jan 2038 00:00:00 GMT;
	")}
else{
	this.set(name,id)}
return id}
,save:function(){
	if(_params.sessionSpan){
	var expires=new Date();
	expires.setTime(expires.getTime()+(_params.sessionSpan*60*1000))}
var cookies="";
	var sckLen=this.sck.length;
	for(var i=0;
	i<sckLen;
	i++){
	cookies+=this.sck[i]+"="+this.sco[this.sck[i]]+"&"}
cookies="pgv_info="+cookies.substr(0,cookies.length-1);
	var expire="";
	if(expires){
	expire="expires="+expires.toGMTString()}
this.saveCookie(cookies,expire)}
,saveCookie:function(cookie,expires){
	_d.cookie=cookie+";
	path=/;
	domain="+_domainToSet+";
	"+expires}
}
;
	window.pgvMain=function(param1,param2){
	var params="";
	if(param2){
	params=param2;
	_ver="o3.0.2"}
else{
	params=param1;
	_ver="3.0.2"}
try{
	if(_rep==1){
	_rep=2}
else{
	return}
new tcss(params).run()}
catch(e){
}
}
;
	window.pgvSendClick=function(params){
	new tcss(params).sendClick()}
;
	window.pgvWatchClick=function(params){
	new tcss(params).watchClick(params)}
}
)();

CSS代码(style.css):

*{margin:0;padding:0;outline:none;}
table{border-collapse:collapse;border-spacing:0;}
em{font-style:normal;}
ol,ul{list-style:none;}
fieldset,img,abbr,acronym{border:0;}
input,select{vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
body{font:normal 14px/1.6em Microsoft YaHei,simsun,sans-serif;color:#fff;min-width:1000px;margin:0 auto;background-color:#000;}
.cfix{*zoom:1}
.cfix:after{content:'\20';display:block;height:0;line-height:0;visibility:hidden;clear:both}
a{text-decoration:none;outline:none;/* firefox */
 hide-focus:expression(this.hideFocus = true);/* ie */
}
a:hover{text-decoration:none;}
.hidden{display:none;}
.fl{float:left;display:inline;}
.fr{float:right;}
.b{font-weight:bold;}
.outer{height:860px;overflow:hidden;}
/*top*/
.toper{height:100px;background:url(../img/top_bg.jpg) no-repeat center top;position:relative;z-index:2;}
.menu{width:1000px;height:100px;margin:0 auto;overflow:hidden;}
.menu li{float:left;width:175px;}
.menu a,.menu a span{display:block;height:100px;}
.menu a span{background:url(../img/menu.jpg) no-repeat;}
.menu a:hover span,.menu .curr span{display:block;height:100px;background:url(../img/menu_active.jpg) no-repeat;}
.menu a span{cursor:pointer;overflow:hidden;text-indent:-999em;}
.menu-feature a span{background-position:-175px 0;}
.menu-guide a span{background-position:-350px 0;}
.menu-feature a:hover span,.menu-feature .curr span{background-position:-175px 0;}
.menu-guide a:hover span,.menu-guide .curr span{background-position:-350px 0;}
/*wrap*/
.wrap{position:relative;z-index:1;height:760px;background-repeat:no-repeat;}
.wrap .mainer1,.wrap .mainer2{width:1000px;margin:0 auto;position:relative;}
h2{font-size:3.4em;font-weight:normal;line-height:60px;letter-spacing:8px;}
.imgs-lnk{position:relative;}
.imgs-lnk .sbg{position:absolute;top:0;left:0;z-index:2;}
/*intro*/
.wrap-intro{background:url(../img/bg/intro_bg.jpg) no-repeat 50% top;}
.wrap-intro-inner{height:760px;background:url(../img/bg/intro_top1.jpg) no-repeat 50% 380px;}
.intro-img{padding:50px 0 0 42px;}
.intro-img .imgs-lnk{margin:42px 42px 0 0;width:405px;height:232px;border:5px solid #2e8890;}
.intro-img .imgs-lnk .sbg{width:405px;height:232px;background:url(../img/bg-imgbox.png) no-repeat;}
.intro_text{padding:50px 0 0 42px;}
.intro_text p{padding:32px 217px 0 0;}
/*feature*/
.wrap-feature{background:url(../img/bg/feature_bg.jpg) no-repeat 50% top;display:none;}
.wrap-feature-inner{height:760px;background:url(../img/bg/feature_top1.jpg) no-repeat 50% 380px;}
.feature_text{height:220px;padding:78px 0 0 42px;}
.feature_text p{padding:30px 220px 0 0;text-indent:2em;}
.feature_text2{padding-left:38px;height:180px;}
.feature_text2 h3{font-size:1.2em;font-weight:normal;}
.feature_text2 p{padding:30px 0 0 6px;}
.cBlue{color:#00e2ff;}
.feature-img{margin-top:25px;margin-left:42px;}
.s-img .imgs-lnk{margin-right:16px;width:190px;height:106px;border:3px solid #0a576b;}
.s-img .imgs-lnk .sbg{width:190px;height:106px;background:url(../img/bg-imgbox2.png) no-repeat;}
.guide-img{margin-top:30px;}
/*guide*/
.wrap-guide{background:url(../img/bg/guide_bg.jpg) no-repeat 50% top;display:none;}
.wrap-guide-inner{height:760px;background:url(../img/bg/guide_top1.jpg) no-repeat 50% 380px;}
.wrap-guide .mainer2{height:760px;padding-top:95px;}
.guideBox{height:660px;overflow:hidden;position:relative;}
.guideInner{position:relative;top:0;}
.gride{height:660px;position:relative;}
.conInner{padding:39px 42px 0 42px;}
.conInner h2{padding-left:193px;letter-spacing:4px;line-height:66px;background:url(../img/guide_title.png) no-repeat;}
.grideCon2{background:url(../img/p3_bg2.png) no-repeat 733px 143px;}
.grideCon2 h2{background-position:0 -66px;}
.grideCon3 h2{background-position:0 -132px;}
.grideCon1 h3{font-size:1.5em;font-weight:normal;padding:30px 0 10px 0;}
.grideCon1 .tx{text-indent:2em;padding-right:200px;}
.grideCon1{background:url(../img/p3_bg.png) no-repeat 21px 260px;}
.grideCon2 .tx{text-indent:2em;padding:50px 270px 0 0;height:120px;}
.grideCon2 .text2{padding-top:30px;}
.grideCon2 .text2 p{padding:3px 275px 3px 0;}
.grideCon3 h3{font-size:1.1em;}
.grideCon3 .rec{padding:48px 278px 0 0;height:127px;background:url(../img/p3_bg3.png) no-repeat 694px 40px;}
.grideCon3 .rec p *{vertical-align:middle;}
.grideCon3 .rec p img{margin-top:-10px;}
.grideCon3 .rec2{background:url(../img/p3_bg4.png) no-repeat 2px 5px;height:206px;padding:73px 0 0 330px;}
.grideCon3 .rec3{position:absolute;top:417px;left:372px;width:530px;height:240px;clear:both;}
.grideCon3 .rec3 .tx2{width:310px;text-align:right;height:112px;margin-bottom:8px;display:table;overflow:hedden;*position:relative;}
.tx2 .cell{display:table-cell;vertical-align:middle;}
.con3Img-img{width:196px;position:absolute;top:0;right:0;}
.con3Img-img .imgs-lnk{margin:0 0 8px 0;}
/*tabnav*/
.guideNav{position:absolute;left:42px;bottom:776px;}
.guideNav li{float:left;display:inline;}
li.guide_tab1{width:211px;}
li.guide_tab2{width:241px;margin-left:123px;}
li.guide_tab3{width:291px;margin-left:52px;}
.guideNav a{display:block;height:66px;line-height:66px;background:url(../img/guide_tab.png) no-repeat;}
.guideNav a span{display:block;text-indent:-999em;}
.guide_tab2 a{background-position:-334px 0;}
.guide_tab3 a{background-position:-627px 0;}
.guideNav a:hover,.guideNav .curr{background:url(../img/guide_tab_act.png) no-repeat;}
.guide_tab2 a:hover,.guideNav .guide_tab2 .curr{background-position:-334px 0;}
.guide_tab3 a:hover,.guideNav .guide_tab3 .curr{background-position:-627px 0;}
/**/
.prev-lnk,.next-lnk{position:absolute;top:470px;z-index:3;display:block;width:53px;height:95px;background:url(../img/arrow.png) no-repeat;}
.prev-lnk{left:11%;}
.next-lnk{right:11%;background-position:-53px 0;}
.popup{position:absolute;display:none;width:780px;height:500px;padding:0 60px;zoom:1;z-index:10;}
.popinner{width:760px;height:580px;border:5px solid #0093ae;overflow:hidden;background-color:#000;position:relative;}
.popinfo{width:470px;height:150px;}
.popinfo .popinner{width:450px;height:80px;padding-top:50px;text-align:center;}
.popclose{position:absolute;top:-10px;right:0;display:block;width:55px;height:55px;font:normal 50px/55px simsun;color:#0093ae;}
.pop-prev,.pop-next{position:absolute;top:272px;display:block;width:26px;height:46px;background:url(../img/arrow.png) no-repeat -115px 0;}
.pop-prev span,.pop-next span{display:none;}
.pop-prev{left:-23px;}
.pop-next{right:-6px;background-position:-141px 0;}
.pop-not span{display:block;position:absolute;top:50px;left:-19px;width:80px;text-align:center;background-color:#0093AE;color:#000;}
/*css3*/
.swap-bg{-moz-animation:bodybg 0.8s ease-in-out forwards;}
.swapinner-bg{-moz-animation:topbg 0.8s ease-in-out forwards;}
@-moz-keyframes bodybg{0%{background-position:-100% top;}
100%{background-position:50% top;}
}
@-moz-keyframes topbg{0%{background-position:-100% 380px;}
100%{background-position:50% 380px;}
}
/*footer*/
.footer{height:200px;background:#000 url(../img/footer_bg.jpg) no-repeat center top;padding-top:26px;}
/*countinue*/
.logo_li{margin-left:275px;}
.logo{display:block;width:100%;height:100%;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.73 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.73 MB
立即下载
杨蕊竹华
了解
打赏作者 鼓励作者
Html 焦点滚动特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章