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

UC浏览器PC版jQuery宣传页滑动滚动特效代码

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

以下是 UC浏览器PC版jQuery宣传页滑动滚动特效代码 的示例演示效果:

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

部分效果截图:

UC浏览器PC版jQuery宣传页滑动滚动特效代码

HTML代码(index.html):

<!doctype html>
<html style="height:100%;">
<head>
<meta charset="utf-8">
<title>UC浏览器PC版jQuery宣传页</title>
</head>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/style.css" id="style">

<body style="height:100%;">

<div id="contpar" class="contpar">
	<div id="" class="cont cont0">
		<div class="png meteor2"><img src="images/icon_meteor2.png" alt="uc浏览器电脑版"></div>
		<div class="header">
			<img src="images/cont0_header.png" class="png" alt="uc浏览器电脑版">
			<a target="_blank" href="" class="png logo">进入UC官网</a>
		</div>
		<div class="meteor0"><img class="png" src="images/icon_meteor0.png" alt="uc浏览器电脑版"></div>
		<div class="meteor1"><img class="png" src="images/icon_meteor1.png" alt="uc浏览器电脑版"></div>
		<div class="meteor3"><img class="png" src="images/icon_meteor3.png" alt="uc浏览器电脑版"></div>
		<div class="star0"><img class="png" src="images/icon_star0.png" alt="uc浏览器电脑版"></div>
		<div class="star1"><img class="png" src="images/icon_star1.png" alt="uc浏览器电脑版"></div>
		<div class="star2"><img class="png" src="images/icon_star2.png" alt="uc浏览器电脑版"></div>
		<div class="star3"><img class="png" src="images/icon_star2.png" alt="uc浏览器电脑版"></div>
		<div class="star4"><img class="png" src="images/icon_star2.png" alt="uc浏览器电脑版"></div>
		<div class="png keymouse"><img class="png" src="images/cont0_keymouse_star.png" alt="uc浏览器电脑版"></div>
		<a href="#" class="png btn">下载UC浏览器电脑版</a>
		<div id="btn_down" class="png btn_down"></div>
		<div class="btndowntit">向下滚动</div>
	</div>
	<div class="cont cont1">
		<div class="png videopar" id="videopar">
			<ul class="tit">
				<li class="current">概念视频</li>
				<li>产品视频</li>
                <li>电脑版之歌</li>
			</ul>
            
            <div class="video">
			<ul style="left:0px;">
				<li>
					<img src="images/video_0.jpg" alt="uc浏览器电脑版">
					<span class="png"></span>
                    <p class="videodetail"></p>
				</li>
				<li>
					<img src="images/video_1.jpg" alt="uc浏览器电脑版">
					<span class="png"></span>
                    <p class="videodetail"></p>
				</li>
                <li>
					<img src="images/ucge.jpg" alt="uc浏览器电脑版">
					<span class="png"></span>
                    <p class="videodetail"></p>
                    <p class="mp3"><a href="#">UC浏览器电脑版之歌手机铃声MP3下载</a></p>
				</li>
			</ul>
            </div>
			<div class="png left" style="display:none;"></div>
			<div class="png right"></div>
		</div>
	</div>
	
	<div class="cont cont2">
		<div class="img14" ><img class="png" src="images/cont2_bg1.png" alt="uc浏览器电脑版"></div>
		<div class="tit-consub0">天生快感：强核极速，天生快人一步 </div>
		<div class="img1" id="cont2_img1"><img class="png" src="images/cont2_img1.png" alt="uc浏览器电脑版"></div>
		<div class="img3" id="cloudLeft"><img class="png" src="images/cont2_img3.png" alt="uc浏览器电脑版"></div>
		<div class="img4" id="cloudRight"><img class="png" src="images/cont2_img4.png" alt="uc浏览器电脑版"></div>
		<div class="img5" id="rocket"><img class="png" src="images/cont2_img5.png" alt="uc浏览器电脑版"></div>
		<div class="img0" id="cont2_img0"><img class="png" src="images/cont2_img0.png" alt="uc浏览器电脑版"></div>
		<div class="img6" id="cont2_img6"><img class="png" src="images/cont2_img6.png" alt="uc浏览器电脑版"></div>
		<div class="img7" id="cont2_img7"><img class="png" src="images/cont2_img7.png" alt="uc浏览器电脑版"></div>
		<div class="img2" id="cont2_img2"><img class="png" src="images/cont2_img2.png" alt="uc浏览器电脑版"></div>
		<dl class="png img8" id="msg0">
			<dt>缓存优化</dt>
			<dd>优化近期浏览页面缓存，<br/>进退浏览一点重现</dd>
		</dl>
		<dl class="png img9" id="msg1">
			<dt>下载加速</dt>
			<dd>
				内置极速下载模块，支持迅雷会员<br/> 登陆，下载速度飞跃提升
			</dd>
		</dl>
		<dl class="png img10" id="msg2">
			<dt>双核双引擎</dt>
			<dd>
				搭载最新的Blink内核和经典Trident 内核，极速浏览，完美兼容 
			</dd>
		</dl>
		<dl class="png img11" id="msg3">
			<dt>云端加速</dt>
			<dd>
				云端智能压缩数据，提升传输<br/> 速度，网页即点即开
			</dd>
		</dl>
		<div class="img12" id="arrow"><img class="png" src="images/cont2_img12.png" alt="uc浏览器电脑版"></div>
		<div class="img13" id="cont2_img13"><img class="png" src="images/cont2_img13.png" alt="uc浏览器电脑版"></div>
	</div>
	<div class="cont cont3">
		<div class="tit-consub1">创意快感：极致创新，极速浏览 </div>
		<div class="img1_consub1" id="cont3_img1"><img class="png" src="images/cont2_consub1_img1.png" alt="uc浏览器电脑版"></div>
		<div class="img0_consub1" id="cont3_img0"><img class="png" src="images/cont2_consub1_img0.png" alt="uc浏览器电脑版"></div>
		<div class="img2_consub1" id="cont3_img2"><img class="png" src="images/cont2_consub1_img2.png" alt="uc浏览器电脑版"></div>
		<div class="img3_consub1" id="cont3_img3"><img class="png" src="images/cont2_consub1_img3.png" alt="uc浏览器电脑版"></div>
		<dl class="png img4_consub1" id="cont3_img4">
			<dt>大图速览</dt>
			<dd>鼠标悬停即可预览大图和动图<br/>无须点击，省心省力 </dd>
		</dl>
		<dl class="png img5_consub1" id="cont3_img5">
			<dt>鼠标预读</dt>
			<dd>独创指针悬停预读技术，未点击<br/>先加载，瞬间开启网页</dd>
		</dl>
		<dl class="png img6_consub1" id="cont3_img6">
			<dt>红杏出园</dt>
			<dd>一键突破屏障访问企业/学校屏蔽<br>站点，风景这边独好</dd>
		</dl>
		<dl class="png img7_consub1" id="cont3_img7">
			<dt>智能拼页</dt>
			<dd>自动拼接前后页面，无须翻页<br/>一读到底，快感不断</dd>
		</dl>
		<div class="img8_consub1" id="cont3_img8"><img class="png" src="images/cont2_consub1_img8.png" alt="uc浏览器电脑版"></div>
	</div>
	<div class="cont cont4">
		<div class="tit-consub2">跨屏快感：随心切换，快感无处不在</div>
		<div class="img0" id="cont4_img0"><img class="png" src="images/cont2_consub2_img0.png" alt="uc浏览器电脑版"></div>
		<dl class="png img1" id="cont4_img1">
			<dt>云同步</dt>
			<dd>不同设备间轻松同步标签、书签<br/>和个性设置，一个UC账号就搞定</dd>
		</dl>
		<dl class="png img2" id="cont4_img2">
			<dt>UC免费WiFi</dt>
			<dd>一秒电脑变路由，随心所欲享WiFi</dd>
		</dl>
		<dl class="png img3" id="cont4_img3">
			<dt>跨屏功能</dt>
			<dd>无需手机助手，一键安装软件到手机<br/>电脑与手机快捷互传文件和网页</dd>
		</dl>
		<div class="img4" id="cont4_img4"><img class="png" src="images/cont2_consub2_img4.png" alt="uc浏览器电脑版"></div>
		<div class="img5" id="cont4_img5"><img class="png" src="images/cont2_consub2_img5.png" alt="uc浏览器电脑版"></div>
		<div class="img6 png" id="cont4_img6"><img class="png" src="images/cont2_consub2_img7.png" alt="uc浏览器电脑版"></div>
		<div class="img8" id="cont4_img8"><img class="png" src="images/cont2_consub2_img8.png" alt="uc浏览器电脑版"></div>
		<div class="img9" id="cont4_img9">
			<img class="png" src="images/cont2_consub2_img9.png" alt="uc浏览器电脑版">
			<ul id="cont4_img9_ph">
				<li class="item0"><img src="images/icon_phone_0.png" alt="uc浏览器电脑版"></li>
				<li class="item1"><img src="images/icon_phone_1.png" alt="uc浏览器电脑版"></li>
				<li class="item2"><img src="images/icon_phone_2.png" alt="uc浏览器电脑版"></li>
			</ul>
		</div>
		<dl class="img10" id="cont4_img10">
			<dt><img class="png" src="images/cont2_consub2_img10.png" alt="uc浏览器电脑版"></dt>
			<dd>下载安卓最新版<br/>UC浏览器,玩转跨屏</dd>
		</dl>

	</div>
	
	<div class="cont cont5">
		<div class="cWin" id="cont5_cWin"><img src="images/cont4_win.png" alt="uc浏览器电脑版"></div>


		<div id="example" class="png">
			<dl>
				<dt>最新动态</dt>
				<a href="" target="_blank">查看全部></a>
			</dl>
			<div id="slides" class="s">
				<div class="slides_container">
					<div>
						<ul class="list-news">
                        <li><span><a href="#" target="_blank">· 屏霸天下！从UC电脑版看未来的浏览器</a></span><em>2014-05-07</em></li>
                        
                        <li><span><a href="#" target="_blank">· 如何解决eset环境下ucwifi移动设备无法联网？</a></span><em>2014-05-04</em></li>
                        <li><span><a href="#" target="_blank">· PC之后，UC的故事怎么讲</a></span><em>2014-04-25</em></li>
                        <li><span><a href="#" target="_blank">· UC浏览器PC版XP系统中浏览器的佼佼者</a></span><em>2014-04-21</em></li>
						<li><span><a href="#" target="_blank">· UC优视发布电脑版浏览器 多屏战略布局初成</a></span><em>2014-04-14</em></li>
                        
                        <li><span><a href="#" target="_blank">· UC发布PC浏览器：以手机为中心打造全新多屏战略</a></span><em>2014-04-10</em></li>
                        
						</ul>
					</div>
                    <div>
						<ul class="list-news">
                        <li><span><a href="#" target="_blank">· 穿越屏幕 超越快感——UC发布首款电脑版浏览器</a></span><em>2014-04-10</em></li>
                        <li><span><a href="#" target="_blank">· UC浏览器电脑版评测 亮点功能大揭秘</a></span><em>2014-04-09</em></li>
                        <li><span><a href="#" target="_blank">· 基于Chrome32内核 UC浏览器电脑版初体验</a></span><em>2014-04-09</em></li>
                        <li><span><a href="#" target="_blank">· 做手机浏览器的思路做PC浏览器：UC推出PC浏览器</a></span><em>2014-04-09</em></li>
						<li><span><a href="#" target="_blank">· 关于UC浏览器电脑版限量公测抢码活动的说明</a></span><em>2014-04-04</em></li>
						<li><span><a href="#" target="_blank">· UC浏览器电脑版公测 做好准备享受快感</a></span><em>2014-04-01</em></li>
						</ul>
					</div>
                    <div>
						<ul class="list-news">
						<li><span><a href="#" target="_blank">· UC浏览器电脑版4月1日开抢限量公测邀请码</a></span><em>2014-03-31</em></li>
						</ul>
					</div>
				</div>
				<a href="javascript:#" class="prev prevsel"></a>
				<a href="javascript:#" class="next"></a>
				<span class="num">01/02</span>
			</div>
		</div>


	</div>
	<div class="cont cont6">
		<div class="meteor0"><img class="png" src="images/icon_meteor0.png" alt="uc浏览器电脑版"></div>
		<div class="meteor1"><img class="png" src="images/icon_meteor1.png" alt="uc浏览器电脑版"></div>
		<div class="meteor2"><img class="png" src="images/icon_meteor2.png" alt="uc浏览器电脑版"></div>
		<div class="meteor3"><img class="png" src="images/icon_meteor3.png" alt="uc浏览器电脑版"></div>
		<div class="star0">  <img class="png" src="images/icon_star0.png" alt="uc浏览器电脑版"></div>
		<div class="star1">  <img class="png" src="images/icon_star1.png" alt="uc浏览器电脑版"></div>
		<div class="star2">  <img class="png" src="images/icon_star2.png" alt="uc浏览器电脑版"></div>
		<div class="star3">  <img class="png" src="images/icon_star2.png" alt="uc浏览器电脑版"></div>
		<div class="star4">  <img class="png" src="images/icon_star2.png" alt="uc浏览器电脑版"></div>
		<a href="" class="png btn btn1">下载UC浏览器电脑版</a>
	</div>
</div>

<ul class="btnlistpar" id="btnlistpar">
	<a class="png mar-t-0" onClick="highline.scroll_To($('.cont0'))"><span>首页</span></a>
	<a class="png" onClick="highline.scroll_To($('.cont1'))"><span>视频</span></a>
	<a class="png" onClick="highline.scroll_To($('.cont2'))"><span>天生快感</span></a>
	<a class="png" onClick="highline.scroll_To($('.cont3'))"><span>创新快感</span></a>
	<a class="png" onClick="highline.scroll_To($('.cont4'))"><span>跨屏快感</span></a>
	<a class="png" onClick="highline.scroll_To($('.cont5'))"><span>最新动态</span></a>
	<a class="png" onClick="highline.scroll_To($('.cont6'))"><span>立即下载</span></a>
</ul>

<div class="btn-up"></div>
<div class="btn-down"></div>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js/vender.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<!--[if IE 6]>
<script language="javascript" type="text/javascript" src="js/ie6_png.js"></script>
<script language="javascript" type="text/javascript">
DD_belatedPNG.fix(".png");
</script>
<![endif]-->
</body>
</html>

JS代码(common.js):

$(document).ready(function(){
	if($.browser.msie&&($.browser.version == '6.0' || $.browser.version == '7.0' || $.browser.version == '8.0' || $.browser.version == '9.0'))$("#style").attr("href","css/style_ie.css");
	//var h=highline.getWinH();
	//highline.jq_lodpar.css({
	"height":h+"px"}
);
	//highline.xManPreload(highline.loadIng,highline.loadEd);
	//进度highline.judgeDevice();
	highline.setSize();
	//调整$(window).resize(function(){
	highline.setSize();
	//调整highline.setPosIe6();
}
);
	$(window).scroll(function(){
	highline.setPosIe6();
}
);
	$(document).mousewheel(function (event,num){
	event=event||window.event;
	event.preventDefault();
	var $dom_cur=event.target.className.indexOf("cont")==-1?$(event.target).closest(".cont"):$(event.target);
	var idx=$dom_cur.index();
	if(!highline.ifScroll) return;
	var $dom=null;
	if(num<0){
	if($dom_cur.next().length>0) $dom=$dom_cur.next();
	else $dom=highline.jq_contpar.children().eq(0);
}
else{
	if($dom_cur.prev().length>0) $dom=$dom_cur.prev();
	else return;
}
highline.scroll_To($dom);
}
);
	$(document).keydown(function(e){
	if(e.keyCode==40||e.which==38) e.preventDefault();
	if(e.keyCode==40) highline.triggerBtnlist(true);
	else if(e.which==38) highline.triggerBtnlist(false);
}
);
	$(".btn-up").click(function(){
	highline.triggerBtnlist(false);
}
);
	$(".btn-down").click(function(){
	highline.triggerBtnlist(true);
}
);
	highline.jq_btn_down.click(function(){
	highline.scroll_To($(".cont1"));
}
);
	$('.s').slides({
	preload:true,preloadImage:'img/loading.gif',//play:1000,pause:2500,hoverPause:true,generatePagination:false}
);
	$(".videopar").videoAbo();
	setTimeout(function(){
	var url=window.location.href,urlArr=url.split("#@");
	if(urlArr.length>1){
	highline.jq_btnlistpar.children("a").eq(parseInt(urlArr[1])).trigger("click");
}
else{
	$(document.body).scrollTop(0);
	highline.jq_btnlistpar.children("a").eq(0).trigger("click");
}
}
,200);
	$(document).bind("touchmove",function(e){
	e.preventDefault();
}
);
	$(".btn").each(function(){
	$(this).click(function(){
	$(this).addClass("btnvisited");
}
);
}
);
}
);
	var highline={
	jq_contpar:$("#contpar"),jq_btn_down:$("#btn_down"),jq_btnlistpar:$("#btnlistpar"),jq_lodpar:$("#lodpar"),ifScroll:1,moreSub:2,win:$(window),anitime:1000,jq_curboxIdx:null,judgeDevice:function(){
	var bo=is_pc();
	if(bo) return;
	$("#btn_down").hide();
	$(".btndowntit").hide();
	highline.jq_btnlistpar.addClass("dis-none");
	$(".btn-up").show();
	$(".btn-down").show();
	$("#videopar .left,#videopar .right").css({
	"visibility":"hidden"}
);
}
,getWinH:function(){
	return this.win.height();
}
,setSize:function(){
	var w=$(window).width();
	var h=this.getWinH();
	$("#contpar .cont").css({
	"height":h+"px"}
);
	switch(true){
	case w<500||h<280:this.setClass(0);
	break;
	case w<720||h<430:this.setClass(1);
	break;
	case w<870||h<490:this.setClass(2);
	break;
	case w<1024||h<580:this.setClass(3);
	break;
	case w<1150||h<680:this.setClass(4);
	break;
	case w<1280||h<720:this.setClass(5);
	break;
	case w<1366||h<768:this.setClass(6);
	break;
	case w<1600||h<900:this.setClass(7);
	break;
	default:this.setClass(8);
	break;
}
if(highline.jq_curboxIdx!=null){
	$(document).scrollTop(highline.jq_contpar.children().eq(highline.jq_curboxIdx)[0].offsetTop);
}
}
,setClass:function(num){
	this.jq_contpar.attr("class","contpar contpar_"+num);
}
,scroll_To:function($obj){
	if(highline.ifScroll==0) return;
	var i=$obj.index();
	var $btnlistpar=highline.jq_btnlistpar;
	if($btnlistpar.children(".sel").index()==i) return;
	highline.ifScroll=0;
	highline.animationBack($btnlistpar.children(".sel").index());
	$btnlistpar.children(".sel").removeClass("sel").end().children("a").eq(i).addClass("sel");
	$.scrollTo($obj,{
	duration:this.anitime,easing:"easeInOutExpo",axis:"y",onAfter:function(){
	highline.setIfScrollOnAfter(i);
	if(i==0) highline.animationBtnDown();
	highline.animation_(i);
	highline.jq_curboxIdx=i;
	if(!is_pc()){
	if(highline.jq_curboxIdx==0)$(".btn-up").hide();
	else$(".btn-up").show();
}
}
}
);
}
,setIfScrollOnAfter:function(num){
	switch(num){
	case 1:setTimeout(function(){
	highline.ifScroll=1;
}
,300);
	break;
	case 2:setTimeout(function(){
	highline.ifScroll=1;
}
,1000);
	break;
	case 3:setTimeout(function(){
	highline.ifScroll=1;
}
,1500);
	break;
	case 4:setTimeout(function(){
	highline.ifScroll=1;
}
,1200);
	break;
	default:highline.ifScroll=1;
	break;
}
}
,setPosIe6:function(){
	var h=this.jq_btnlistpar.height();
	var tScro=$(window).scrollTop();
	var hWin=$(window).height();
	this.jq_btnlistpar.attr({
	"style":"_top:"+(tScro+hWin/2)+"px"}
);
}
,triggerBtnlist:function(bo){
	var $dds=this.jq_btnlistpar.children("a").not("#bdshare");
	var i=this.jq_btnlistpar.children(".sel").eq(0).index();
	if(bo&&i<$dds.length-1)this.jq_btnlistpar.children("a").eq(i+1).trigger("click");
	else if(bo&&i==$dds.length-1)this.jq_btnlistpar.children("a").eq(0).trigger("click");
	else if(!bo&&i>0)this.jq_btnlistpar.children("a").eq(i-1).trigger("click");
}
,animation_:function(num){
	switch(num){
	case 1://this.aniCom_MtopOpacity($("#videopar"),"-512px","1",200);
	$("#videopar").addClass("videopar_ani");
	break;
	case 2:var time=400,time1=800;
	$("#cont2_img0").addClass("img0_ani");
	$("#cont2_img1").addClass("img1_ani");
	$("#cont2_img2").addClass("img2_ani");
	setTimeout(function(){
	$("#cloudLeft").addClass("img3_ani");
}
,time);
	setTimeout(function(){
	$("#cloudRight").addClass("img4_ani");
}
,time);
	setTimeout(function(){
	$("#rocket").addClass("img5_ani");
}
,time);
	setTimeout(function(){
	$("#cont2_img6,#cont2_img7").addClass("com_ani_scale_1");
}
,time);
	setTimeout(function(){
	$("#cont2_img6").addClass("img6_ani");
}
,time1);
	setTimeout(function(){
	$("#cont2_img7").addClass("img7_ani");
}
,time1);
	setTimeout(function(){
	$("#msg0").addClass("img8_ani");
}
,time1);
	setTimeout(function(){
	$("#msg1").addClass("img9_ani");
}
,time1);
	setTimeout(function(){
	$("#msg2").addClass("img10_ani");
}
,time);
	setTimeout(function(){
	$("#msg3").addClass("img11_ani");
}
,time);
	setTimeout(function(){
	$("#arrow").addClass("img12_ani");
}
,time);
	setTimeout(function(){
	$("#cont2_img13").addClass("com_ani_scale_1");
}
,time1);
	this.aniCom_MtopOpacity($(".tit-consub0"),"-290px","1",time);
	break;
	case 3:var time=400,time1=1000;
	$("#cont3_img0").addClass("img0_ani");
	setTimeout(function(){
	$("#cont3_img1").addClass("img1_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img2").addClass("img2_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img3").addClass("img3_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img4").addClass("img4_ani");
}
,time1);
	setTimeout(function(){
	$("#cont3_img5").addClass("img5_ani");
}
,time1);
	setTimeout(function(){
	$("#cont3_img6").addClass("img6_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img7").addClass("img7_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img8").addClass("com_ani_scale_1");
}
,time);
	this.aniCom_MtopOpacity($(".tit-consub1"),"-310px","1",time);
	break;
	case 4:var time=300,time1=200,time2=100,time3=700,time4=1200;
	$("#cont4_img0").addClass("img0_ani");
	$("#cont4_img10").addClass("img10_ani");
	setTimeout(function(){
	$("#cont4_img1").addClass("img1_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img2").addClass("img2_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img3").addClass("img3_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img4").addClass("img4_ani");
}
,time3);
	setTimeout(function(){
	$("#cont4_img5").addClass("img5_ani");
}
,time3);
	setTimeout(function(){
	$("#cont4_img6").addClass("img6_ani");
}
,time2);
	setTimeout(function(){
	$("#cont4_img6 img").addClass("com_ani_rotate");
}
,1000);
	setTimeout(function(){
	$("#cont4_img8").addClass("img8_ani");
}
,time2);
	setTimeout(function(){
	$("#cont4_img9").addClass("img9_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img9 ul .item2").addClass("item2_ani");
}
,time4);
	setTimeout(function(){
	$("#cont4_img9 ul .item1").addClass("item1_ani");
}
,time4+200);
	setTimeout(function(){
	$("#cont4_img9 ul .item0").addClass("item0_ani");
}
,time4+400);
	this.aniCom_MtopOpacity($(".tit-consub2"),"-260px","1",time);
	break;
	case 5://this.aniCom_MtopOpacity($("#cont5_cWin"),"-167px","1",500);
	//this.aniCom_MtopOpacity($("#example"),"-172px","1",400);
	$("#cont5_cWin").addClass("cWin_ani");
	$("#example").addClass("example_ani");
	break;
}
}
,animationBack:function(num){
	switch(num){
	case 1://this.aniCom_MtopOpacity($("#videopar"),"-300px","0",400);
	$("#videopar").removeClass("videopar_ani");
	break;
	case 2:var time=200,time1=100;
	setTimeout(function(){
	$("#cont2_img0").removeClass("img0_ani");
}
,time);
	setTimeout(function(){
	$("#cont2_img1").removeClass("img1_ani");
}
,time);
	setTimeout(function(){
	$("#cont2_img2").removeClass("img2_ani");
}
,time);
	$("#cloudLeft").removeClass("img3_ani");
	$("#cloudRight").removeClass("img4_ani");
	$("#rocket").removeClass("img5_ani");
	$("#cont2_img6").removeClass("img6_ani");
	$("#cont2_img7").removeClass("img7_ani");
	setTimeout(function(){
	$("#cont2_img6,#cont2_img7").removeClass("com_ani_scale_1");
}
,time1);
	$("#msg0").removeClass("img8_ani");
	$("#msg1").removeClass("img9_ani");
	$("#msg2").removeClass("img10_ani");
	$("#msg3").removeClass("img11_ani");
	$("#arrow").removeClass("img12_ani");
	$("#cont2_img13").removeClass("com_ani_scale_1");
	this.aniCom_MtopOpacity($(".tit-consub0"),"-250px","0",time);
	break;
	case 3:var time=100;
	var time1=200;
	setTimeout(function(){
	$("#cont3_img0").removeClass("img0_ani");
}
,time1);
	setTimeout(function(){
	$("#cont3_img1").removeClass("img1_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img2").removeClass("img2_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img3").removeClass("img3_ani");
}
,time);
	$("#cont3_img4").removeClass("img4_ani");
	$("#cont3_img5").removeClass("img5_ani");
	setTimeout(function(){
	$("#cont3_img6").removeClass("img6_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img7").removeClass("img7_ani");
}
,time);
	setTimeout(function(){
	$("#cont3_img8").removeClass("com_ani_scale_1");
}
,time);
	this.aniCom_MtopOpacity($(".tit-consub1"),"-270px","0",time);
	break;
	case 4:var time=300;
	setTimeout(function(){
	$("#cont4_img0").removeClass("img0_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img10").removeClass("img10_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img1").removeClass("img1_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img2").removeClass("img2_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img3").removeClass("img3_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img4").removeClass("img4_ani");
}
,time);
	setTimeout(function(){
	$("#cont4_img5").removeClass("img5_ani");
}
,time);
	$("#cont4_img6").children("img").removeClass("com_ani_rotate");
	$("#cont4_img6").removeClass("img6_ani");
	setTimeout(function(){
	$("#cont4_img8").removeClass("img8_ani");
	$("#cont4_img9 ul .item2").removeClass("item2_ani");
	$("#cont4_img9 ul .item1").removeClass("item1_ani");
	$("#cont4_img9 ul .item0").removeClass("item0_ani");
}
,time);
	$("#cont4_img9").removeClass("img9_ani");
	this.aniCom_MtopOpacity($(".tit-consub2"),"-220px","0",time);
	break;
	case 5://var time=400;
	//this.aniCom_MtopOpacity($("#cont5_cWin"),"-107px","0",time);
	//this.aniCom_MtopOpacity($("#example"),"-112px","0",time);
	$("#cont5_cWin").removeClass("cWin_ani");
	$("#example").removeClass("example_ani");
	break;
}
}
,aniCom_MtopOpacity:function($obj,Mtop,Opacity,time){
	$obj.animate({
	"opacity":Opacity,"margin-top":Mtop}
,time);
}
,animationBtnDown:function(){
	highline.jq_btn_down.addClass("btn_down_animation");
	setTimeout(function(){
	highline.jq_btn_down.removeClass("btn_down_animation");
}
,1000);
	setTimeout(function(){
	highline.jq_btn_down.addClass("btn_down_animation");
}
,3000);
	setTimeout(function(){
	highline.jq_btn_down.removeClass("btn_down_animation");
}
,4000);
}
,xManPreload:function(fnIng,fnEd){
	var count=0;
	var aImg=document.getElementsByTagName('img');
	var load=[];
	for(var i=0;
	i<aImg.length;
	i++){
	load[i]=new Image();
	load[i].onload=function(){
	count++;
	if(fnIng) fnIng(count,aImg.length);
	if(count>=aImg.length){
	if(fnEd) fnEd();
}
}
;
	load[i].src=aImg[i].src;
}
}
,loadIng:function(cou,sum){
	var percent=parseInt(cou/sum*100);
	var $lodtit=$(".lodtit"),$lodpar=highline.jq_lodpar;
	var wWin=$(window).width();
	var wLodtit=$lodtit.width();
	var wStar=(wWin-wLodtit)/2;
	$lodpar.show();
	if(percent<=50){
	var w=percent/100*2*wStar;
	$(".lodleft,.lodright").css({
	"width":w+"px"}
);
	if(percent==50){
	$lodtit.addClass("lodtit_sel");
	$(".lodleft").css({
	"left":"auto","right":wWin-w+"px"}
);
	$(".lodright").css({
	"right":"auto","left":wWin-w+"px"}
);
}
}
else{
	var n=1-((percent-50)/100*2);
	var w=n*wStar;
	$(".lodleft,.lodright").css({
	"width":w+"px"}
);
	var scale=(percent-50)/100*2*2+1;
	$lodtit.css({
	"-webkit-transform":"scale("+scale+")","-moz-transform":"scale("+scale+")","-o-transform":"scale("+scale+")","transform":"scale("+scale+")","opacity":n}
);
}
}
,loadEd:function(){
	var $lodtit=$(".lodtit"),$lodpar=highline.jq_lodpar;
	$lodpar.animate({
	"opacity":"0"}
,1000,function(){
	$(this).hide().remove();
}
);
}
}
function openFlinks(obj){
	var $obj=$(obj);
	var $p=$obj.parent();
	if($p.is(".flinks_sel")){
	$p.removeClass("flinks_sel");
}
else{
	$p.addClass("flinks_sel");
}
}
//video$.fn.videoAbo=function(){
	var vHtmla='<object width="800" height="450" id="FLVPlayera" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">';
	vHtmla+='<param name="movie" value="./video/FLVPlayer_Progressive.swf">';
	vHtmla+='<param name="quality" value="high">';
	vHtmla+='<param name="wmode" value="transparent">';
	vHtmla+='<param name="scale" value="noscale">';
	vHtmla+='<param name="salign" value="lt">';
	vHtmla+='<param name="FlashVars" value="&amp;
	MM_ComponentVersion=1&amp;
	skinName=./video/Clear_Skin_2&amp;
	streamName=../flash/uc&amp;
	autoPlay=true&amp;
	autoRewind=false">';
	vHtmla+='<param name="swfversion" value="8,0,0,0">';
	vHtmla+='<!--[if !IE]>-->';
	vHtmla+='<object type="application/x-shockwave-flash" data="./video/FLVPlayer_Progressive.swf" width="800" height="450">';
	vHtmla+='<!--<![endif]-->';
	vHtmla+='<param name="quality" value="high">';
	vHtmla+='<param name="wmode" value="transparent">';
	vHtmla+='<param name="scale" value="noscale">';
	vHtmla+='<param name="salign" value="lt">';
	vHtmla+='<param name="FlashVars" value="&amp;
	MM_ComponentVersion=1&amp;
	skinName=./video/Clear_Skin_2&amp;
	streamName=../flash/uc&amp;
	autoPlay=true&amp;
	autoRewind=false">';
	vHtmla+='<param name="swfversion" value="8,0,0,0">';
	vHtmla+='<param name="expressinstall" value="./flash/uc.flv">';
	vHtmla+='<!--[if !IE]>-->';
	vHtmla+='</object>';
	vHtmla+='<!--<![endif]-->';
	vHtmla+='</param name="swfversion">';
	vHtmla+='</object>';
	var vHtmlb='<object width="800" height="450" id="FLVPlayerb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">';
	vHtmlb+='<param name="movie" value="./video/FLVPlayer_Progressive.swf">';
	vHtmlb+='<param name="quality" value="high">';
	vHtmlb+='<param name="wmode" value="transparent">';
	vHtmlb+='<param name="scale" value="noscale">';
	vHtmlb+='<param name="salign" value="lt">';
	vHtmlb+='<param name="FlashVars" value="&amp;
	MM_ComponentVersion=1&amp;
	skinName=./video/Clear_Skin_2&amp;
	streamName=../flash/video2&amp;
	autoPlay=true&amp;
	autoRewind=false">';
	vHtmlb+='<param name="swfversion" value="8,0,0,0">';
	vHtmlb+='<!--[if !IE]>-->';
	vHtmlb+='<object type="application/x-shockwave-flash" data="./video/FLVPlayer_Progressive.swf" width="800" height="450">';
	vHtmlb+='<!--<![endif]-->';
	vHtmlb+='<param name="quality" value="high">';
	vHtmlb+='<param name="wmode" value="transparent">';
	vHtmlb+='<param name="scale" value="noscale">';
	vHtmlb+='<param name="salign" value="lt">';
	vHtmlb+='<param name="FlashVars" value="&amp;
	MM_ComponentVersion=1&amp;
	skinName=./video/Clear_Skin_2&amp;
	streamName=../flash/video2&amp;
	autoPlay=true&amp;
	autoRewind=false">';
	vHtmlb+='<param name="swfversion" value="8,0,0,0">';
	vHtmlb+='<param name="expressinstall" value="./flash/video2.flv">';
	vHtmlb+='<!--[if !IE]>-->';
	vHtmlb+='</object>';
	vHtmlb+='<!--<![endif]-->';
	vHtmlb+='</param name="swfversion">';
	vHtmlb+='</object>';
	var vHtmlc='<object width="800" height="450" id="FLVPlayerb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">';
	vHtmlc+='<param name="movie" value="./video/FLVPlayer_Progressive.swf">';
	vHtmlc+='<param name="quality" value="high">';
	vHtmlc+='<param name="wmode" value="transparent">';
	vHtmlc+='<param name="scale" value="noscale">';
	vHtmlc+='<param name="salign" value="lt">';
	vHtmlc+='<param name="FlashVars" value="&amp;
	MM_ComponentVersion=1&amp;
	skinName=./video/Clear_Skin_2&amp;
	streamName=../flash/ucge&amp;
	autoPlay=true&amp;
	autoRewind=false">';
	vHtmlc+='<param name="swfversion" value="8,0,0,0">';
	vHtmlc+='<!--[if !IE]>-->';
	vHtmlc+='<object type="application/x-shockwave-flash" data="./video/FLVPlayer_Progressive.swf" width="800" height="450">';
	vHtmlc+='<!--<![endif]-->';
	vHtmlc+='<param name="quality" value="high">';
	vHtmlc+='<param name="wmode" value="transparent">';
	vHtmlc+='<param name="scale" value="noscale">';
	vHtmlc+='<param name="salign" value="lt">';
	vHtmlc+='<param name="FlashVars" value="&amp;
	MM_ComponentVersion=1&amp;
	skinName=./video/Clear_Skin_2&amp;
	streamName=../flash/ucge&amp;
	autoPlay=true&amp;
	autoRewind=false">';
	vHtmlc+='<param name="swfversion" value="8,0,0,0">';
	vHtmlc+='<param name="expressinstall" value="./flash/ucge.flv">';
	vHtmlc+='<!--[if !IE]>-->';
	vHtmlc+='</object>';
	vHtmlc+='<!--<![endif]-->';
	vHtmlc+='</param name="swfversion">';
	vHtmlc+='</object>';
	if(!is_pc()){
	vHtmla='<video class="v" src="./flash/uc.mp4" autoPlay controls></video>';
	vHtmlb='<video class="v" src="./flash/video2.mp4" autoPlay controls></video>';
	vHtmlc='<video class="v" src="./flash/ucge.mp4" autoPlay controls></video>';
}
var bo=0,numpos=800,time=200,$par=$(this),$barLeft=$par.children(".left"),$barRight=$par.children(".right"),$ul=$par.children(".video").children("ul"),$tit_lis=$par.children(".tit").children("li");
	var ani=function(i){
	$ul.animate({
	"left":-i*numpos+"px"}
,time);
	i>0?$barLeft.show():"";
	i==0?$barLeft.hide():"";
	i<2?$barRight.show():"";
	i==2?$barRight.hide():"";
	$tit_lis.eq(i).addClass("current").siblings().removeClass("current");
	$par.find(".videodetail").empty();
	$(".video ul li").children("img").show();
	$(".video ul li").children("span").show();
}
;
	$barRight.click(function(){
	if(bo) return;
	bo=1;
	var i=-parseInt($ul.css("left"))/numpos;
	i+1<=2? ani(i+1):"";
	setTimeout(function(){
	bo=0;
}
,time+100);
}
);
	$barLeft.click(function(){
	if(bo) return;
	bo=1;
	var i=-parseInt($ul.css("left"))/numpos;
	i-1>=0? ani(i-1):"";
	setTimeout(function(){
	bo=0;
}
,time+100);
}
);
	$tit_lis.click(function(){
	ani($(this).index());
}
)$(".video ul li span").each(function(i){
	$(this).click(function(){
	$(".video ul li").children("img").show();
	$(".video ul li").children("span").show();
	$(this).parent().children("img").hide();
	$(this).parent().children("span").hide();
	var v=null;
	switch(i){
	case 0:v=vHtmla;
	break;
	case 1:v=vHtmlb;
	break;
	case 2:v=vHtmlc;
	break;
}
$(this).parent().children(".videodetail").append(v);
}
);
}
);
}
;
	function is_pc(){
	// 其他类型的移动操作系统类型，自行添加 var os = new Array("Android","iPhone","Windows Phone","iPod","iPad","BlackBerry","MeeGo","SymbianOS");
	var info = navigator.userAgent;
	var len = os.length;
	for (var i = 0;
	i < len;
	i++){
	if (info.indexOf(os[i]) > 0){
	return false;
}
}
return true;
}

CSS代码(style.css):

*{margin:0;padding:0}
body{overflow:hidden;font-family:'微软雅黑','黑体',serif,'宋体';color:#4d6287;font-size:14px;}
div,li,dt,dd,span{font-family:'微软雅黑'}
li{list-style-type:none;}
a,a:active{text-decoration:none;color:#4d6287;font-family:'微软雅黑';}
img{border:none;}
.dis-none{display:none !important;}
.bor-left-none{border-left:none !important;}
.mar-t-0{margin-top:0 !important;}
.star0,.star1,.star2,.star3,.star4{width:30px;height:30px;position:absolute;left:50%;top:50%;}
.star0{margin:-329px 0 0 -437px;-webkit-animation:star 16s linear infinite;-moz-animation:star 16s linear infinite;-o-animation:star 16s linear infinite;animation:star 16s linear infinite;}
.star1{margin:-216px 0 0 411px;-webkit-animation:star 30s linear infinite;-moz-animation:star 30s linear infinite;-o-animation:star 30s linear infinite;animation:star 30s linear infinite;}
.star2{margin:-86px 0 0 -358px;-webkit-animation:star 10s linear infinite;-moz-animation:star 10s linear infinite;-o-animation:star 10s linear infinite;animation:star 10s linear infinite;}
.star3{margin:-136px 0 0 -251px;-webkit-animation:star 5s linear infinite;-moz-animation:star 5s linear infinite;-o-animation:star 5s linear infinite;animation:star 5s linear infinite;}
.star4{margin:-22px 0 0 157px;-webkit-animation:star 3s linear infinite;-moz-animation:star 3s linear infinite;-o-animation:star 3s linear infinite;animation:star 3s linear infinite;}
@-webkit-keyframes star{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes star{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframes star{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@keyframes star{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
.meteor0,.meteor1,.meteor2,.meteor3{position:absolute;left:50%;top:50%;}
.meteor0{width:40px;height:26px;margin:-100px 0 0 -100px;-webkit-animation:meteor0 4s ease infinite;-moz-animation:meteor0 4s ease infinite;-o-animation:meteor0 4s ease infinite;animation:meteor0 4s ease infinite;opacity:0;}
@-webkit-keyframes meteor0{0%{opacity:0;margin:-450px 0 0 600px;}
25%{opacity:1;}
50%{opacity:0;margin:-100px 0 0 -100px;}
100%{}
}
@-moz-keyframes meteor0{0%{opacity:0;margin:-450px 0 0 600px;}
25%{opacity:1;}
50%{opacity:0;margin:-100px 0 0 -100px;}
100%{}
}
@-o-keyframes meteor0{0%{opacity:0;margin:-450px 0 0 600px;}
25%{opacity:1;}
50%{opacity:0;margin:-100px 0 0 -100px;}
100%{}
}
@keyframes meteor0{0%{opacity:0;margin:-450px 0 0 600px;}
25%{opacity:1;}
50%{opacity:0;margin:-100px 0 0 -100px;}
100%{}
}
.meteor1{width:60px;height:40px;margin:500px 0 0 -500px;-webkit-animation:meteor1 10s ease infinite;-moz-animation:meteor1 10s ease infinite;-o-animation:meteor1 10s ease infinite;animation:meteor1 10s ease infinite;opacity:0;}
@-webkit-keyframes meteor1{0%{}
80%{opacity:0;margin:-400px 0 0 700px;}
90%{opacity:1;}
100%{opacity:0;margin:600px 0 0 -500px;}
}
@-moz-keyframes meteor1{0%{}
80%{opacity:0;margin:-400px 0 0 700px;}
90%{opacity:1;}
100%{opacity:0;margin:600px 0 0 -500px;}
}
@-o-keyframes meteor1{0%{}
80%{opacity:0;margin:-400px 0 0 700px;}
90%{opacity:1;}
100%{opacity:0;margin:600px 0 0 -500px;}
}
@keyframes meteor1{0%{}
80%{opacity:0;margin:-400px 0 0 700px;}
90%{opacity:1;}
100%{opacity:0;margin:600px 0 0 -500px;}
}
.meteor2{width:90px;height:60px;margin:-500px 0 0 300px;-webkit-animation:meteor2 8s ease infinite;-moz-animation:meteor2 8s ease infinite;-o-animation:meteor2 8s ease infinite;animation:meteor2 8s ease infinite;opacity:0;}
@-webkit-keyframes meteor2{0%{}
25%{opacity:0;margin:-500px 0 0 300px;}
50%{opacity:1;}
75%{opacity:0;margin:100px 0 0 -1000px;}
100%{}
}
@-moz-keyframes meteor2{0%{}
25%{opacity:0;margin:-500px 0 0 300px;}
50%{opacity:1;}
75%{opacity:0;margin:100px 0 0 -1000px;}
100%{}
}
@-o-keyframes meteor2{0%{}
25%{opacity:0;margin:-500px 0 0 300px;}
50%{opacity:1;}
75%{opacity:0;margin:100px 0 0 -1000px;}
100%{}
}
@keyframes meteor2{0%{}
25%{opacity:0;margin:-500px 0 0 300px;}
50%{opacity:1;}
75%{opacity:0;margin:100px 0 0 -1000px;}
100%{}
}
.meteor3{width:90px;height:60px;margin:100px 0 0 1000px;-webkit-animation:meteor3 16s ease infinite;-moz-animation:meteor3 16s ease infinite;-o-animation:meteor3 16s ease infinite;animation:meteor3 16s ease infinite;opacity:0;}
@-webkit-keyframes meteor3{0%{}
25%{opacity:0;margin:100px 0 0 1000px;}
50%{opacity:1;}
75%{opacity:0;margin:600px 0 0 100px;}
100%{}
}
@-moz-keyframes meteor3{0%{}
25%{opacity:0;margin:100px 0 0 1000px;}
50%{opacity:1;}
75%{opacity:0;margin:600px 0 0 100px;}
100%{}
}
@-o-keyframes meteor3{0%{}
25%{opacity:0;margin:100px 0 0 1000px;}
50%{opacity:1;}
75%{opacity:0;margin:600px 0 0 100px;}
100%{}
}
@keyframes meteor3{0%{}
25%{opacity:0;margin:100px 0 0 1000px;}
50%{opacity:1;}
75%{opacity:0;margin:600px 0 0 100px;}
100%{}
}
.btn-up,.btn-down{position:fixed;top:40px;left:50%;width:69px;height:41px;background:url("../images/btn_up.png") no-repeat;margin-left:-34px;display:none;}
.btn-down{background:url("../images/btn_down.png") no-repeat;top:auto;bottom:40px;}
.btnlistpar{padding:0;margin:0;margin-top:-127px;top:50%;right:20px;position:fixed;_position:absolute;line-height:18px;overflow:hidden;*width:27px;float:right;clear:both;}
.btnlistpar:hover{*width:88px;}
.btnlistpar a{display:block;margin-top:4px;padding-right:26px;color:#c1c7d0;text-align:right;cursor:pointer;background:url("../images/btnlist.png") no-repeat right center;float:right!important;clear:both;overflow:hidden;width:1px;height:28px;line-height:28px;position:relative;font-size:12px;color:#a6bee0;}
.btnlistpar a span{display:none;text-align:right;}
.btnlistpar a:hover{width:62px;background:url("../images/btnlist_sel.png") no-repeat right center;}
.btnlistpar .sel{background:url("../images/btnlist_sel.png") no-repeat right center;}
.btnlistpar a:hover span{display:block;}
.btnlistpar #bdshare{background:url("../images/share.png") no-repeat right center;}
.btnlistpar #bdshare em{position:absolute;top:0;right:0;width:100%;height:100%;background:none !important;}
.btnlistparPhone{margin-top:-215px;right:50px;}
.btnlistparPhone a{height:36px;line-height:36px;padding-right:50px;font-size:24px;margin-top:20px;}
.btnlistparPhone a:not(.share):before{content:'';width:30px;height:30px;background:#c1c7d0;border-radius:18px;position:absolute;top:3px;right:3px;}
.btnlistparPhone a.sel:not(.share):before{width:36px;height:36px;top:0;right:0;}
.btnlistparPhone a.sel:before{background-color:#2365d3;}
.btn{width:288px;height:102px;line-height:102px;color:#cee6ff;position:absolute;bottom:18%;left:50%;margin-left:-144px;background:url("../images/btn.png") no-repeat center;text-align:center;font-size:22px;letter-spacing:1px;text-shadow:2px 4px 3px rgba(13,33,95,0.30);}
.btn span{font-size:18px;}
.btn:hover{color:#fff;background:url("../images/btn_hover.png") no-repeat center;}
.btnvisited{color:#b4d0ec;}
.btn1{bottom:auto;top:50%;margin-top:-30px;}
.lodpar{position:absolute;width:100%;background:#040f27;top:0;left:0;z-index:9999;height:100%;}
.lodtit{width:184px;height:100px;background:url("../images/log_icon_a.png") no-repeat center;background-size:100% 100%;position:absolute;top:50%;left:50%;margin:-50px 0 0 -92px;position:relative;}
.lodtit_sel{background:url("../images/log_icon_b.png") no-repeat center;}
.lodleft,.lodright{position:absolute;top:50%;height:20px;width:0;overflow:hidden;left:0;margin-top:-15px;}
.lodright{left:auto;right:0;margin-top:15px;}
.lodleft dt,.lodright dt{line-height:0;font-size:0;height:20px;float:right;width:37px;position:relative;}
.lodright dt{float:left;}
.lodleft dd,.lodright dd{height:2px;width:100%;position:absolute;left:0;top:9px;_top:9px;background:#55acfd;line-height:0;font-size:0;}
.contpar{position:relative;}
.contpar .cont{width:100%;height:700px;position:relative;overflow:hidden;}
.cont0{background:#040509 url("../images/cont0_bg.png") repeat center top;}
.cont1{background:#142647;}
.cont2,.cont3,.cont4{background:url("../images/cont2_bg.png") repeat;}
.cont5{background:url("../images/cont3_bg.png") repeat center top;}
.cont6{background:url("../images/cont4_bg.png") repeat center;}
/*============================================================*/
.cont0 .header{position:absolute;top:0;left:50%;/*width:80%;margin-left:-40%;*/
_width:1400px !important;_margin-left:-700px !important;}
.tit-consub0{position:absolute;top:50%;left:50%;color:#fff;font-size:40px;height:50px;line-height:50px;margin:-250px 0 0 -390px;width:640px;opacity:0;font-family:'微软雅黑';}
.cont0 .header img{width:100%;}
.contpar_0 .cont0 .header{/*<500 <280*/
margin-left:-240px;width:480px;}
.contpar_1 .cont0 .header{/*<720 <430*/
margin-left:-250px;width:500px;}
.contpar_2 .cont0 .header{/*<870 <490*/
margin-left:-360px;width:720px;}
.contpar_0 .cont0 .btn,.contpar_1 .cont0 .btn,.contpar_2 .cont0 .btn{font-size:16px;background:url("../images/btn2.png") no-repeat center;}
.contpar_0 .cont0 .btn:hover,.contpar_1 .cont0 .btn:hover,.contpar_2 .cont0 .btn:hover{background:url("../images/btn_hover2.png") no-repeat center;}
.contpar_0 .cont0 .btn span,.contpar_1 .cont0 .btn span,.contpar_2 .cont0 .btn span{font-size:14px;}
.contpar_3 .cont0 .header{/*<1024 <580*/
margin-left:-435px;width:870px;}
.contpar_4 .cont0 .header{/*<1150 <680*/
margin-left:-512px;width:1024px;}
.contpar_5 .cont0 .header{/*<1280 <720*/
margin-left:-575px;width:1150px;}
.contpar_3 .cont0 .btn,.contpar_4 .cont0 .btn,.contpar_5 .cont0 .btn{font-size:18px;background:url("../images/btn1.png") no-repeat center;}
.contpar_3 .cont0 .btn:hover,.contpar_4 .cont0 .btn:hover,.contpar_5 .cont0 .btn:hover{background:url("../images/btn_hover1.png") no-repeat center;}
.contpar_3 .cont0 .btn span,.contpar_4 .cont0 .btn span,.contpar_5 .cont0 .btn span{font-size:16px;}
.contpar_6 .cont0 .header{/*<1366 <768*/
margin-left:-640px;width:1280px;}
.contpar_7 .cont0 .header{/*<1600 <900*/
margin-left:-683px;width:1366px;}
.contpar_8 .cont0 .header{/*>1600 >900*/
margin-left:-700px;width:1400px;}
.logo{width:100px;height:25px;line-height:30px;background:url("../images/cont0_logo.png") no-repeat left top;position:absolute;top:20px;left:16%;color:#fff;padding:0 0 0 35px;}
.keymouse{background:url("../images/cont0_keymouse.png") no-repeat center;width:95px;height:33px;position:absolute;bottom:20px;right:20px;line-height:0;}
.keymouse img{-webkit-animation:keymouse 6s linear infinite;-moz-animation:keymouse 6s linear infinite;-o-animation:keymouse 6s linear infinite;animation:keymouse 6s linear infinite;opacity:0;}
@-webkit-keyframes keymouse{0%{}
30%{opacity:0;}
40%{opacity:1;}
50%{opacity:0;}
60%{opacity:1;}
70%{opacity:0;}
100%{}
}
@-moz-keyframes keymouse{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframes keymouse{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@keyframes keymouse{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
.btn_down{cursor:pointer;width:70px;height:66px;position:absolute;bottom:5%;left:50%;margin-left:-35px;background:url("../images/cont0_btndown.png") no-repeat center bottom;}
.btn_down_animation{animation:shake .8s linear 0s 1 normal;-moz-animation:shake .8s linear 0s 1 normal;-webkit-animation:shake .8s ease-in-out 0s 1 normal;-o-animation:shake .8s linear 0s 1 normal;}
@-webkit-keyframes shake{0%{-webkit-transform:translate(0,0);}
25%{-webkit-transform:translate(0,-50px);}
50%{-webkit-transform:translate(0,0);}
70%{-webkit-transform:translate(0px,-20px);}
100%{-webkit-transform:translate(0,0);}
}
@keyframes shake{0%{transform:translate(0,0);}
25%{transform:translate(0,-50px);}
50%{transform:translate(0,0);}
70%{transform:translate(0px,-20px);}
100%{transform:translate(0,0);}
}
@-moz-keyframes shake{0%{-moz-transform:translate(0,0);}
25%{-moz-transform:translate(0,-50px);}
50%{-moz-transform:translate(0,0);}
70%{-moz-transform:translate(0px,-20px);}
100%{-moz-transform:translate(0,0);}
}
@-o-keyframes shake{0%{-o-transform:translate(0,0);}
25%{-o-transform:translate(0,-50px);}
50%{-o-transform:translate(0,0);}
70%{-o-transform:translate(0px,-20px);}
100%{-o-transform:translate(0,0);}
}
.btndowntit{width:70px;height:26px;line-height:26px;position:absolute;bottom:10%;left:50%;margin-left:-35px;text-align:center;color:#4368b0;}
/*=================================================*/
.cont1 .videopar{position:absolute;top:50%;left:50%;width:1920px;height:1024px;margin:-450px 0 0 -960px;background:url("../images/cont1_video_bg.png") no-repeat center bottom;opacity:0;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;}
.cont1 .videopar_ani{opacity:1;margin:-512px 0 0 -960px;}
.cont1 .videopar .left,.cont1 .videopar .right{width:41px;height:69px;position:absolute;left:450px;top:476px;background:url("../images/btn_left.png") no-repeat center;cursor:pointer;}
.cont1 .videopar .left:hover{background:url("../images/btn_left_sel.png") no-repeat center;}
.cont1 .videopar .right{left:auto;right:470px;background:url("../images/btn_right.png") no-repeat center;}
.cont1 .videopar .right:hover{background:url("../images/btn_right_sel.png") no-repeat center;}
.cont1 .videopar .tit{overflow:hidden;font-size:40px;padding:230px 567px 0 556px;color:#2d4677;height:60px;}
.cont1 .videopar .tit li{float:left;transition:all .8s ease;-webkit-transition:all .8s ease;-moz-transition:all .8s ease;-o-transition:all .8s ease;cursor:pointer;width:265px;text-align:center;}
.cont1 .videopar .tit li:nth-child(1){text-align:left;}
.cont1 .videopar .tit li:nth-child(3){text-align:right;}
.cont1 .videopar .tit .current{color:#73aaf4;cursor:default;}
.cont1 .videopar .video{width:800px;height:480px;margin:15px 0 0 555px;position:relative;overflow:hidden;}
.cont1 .videopar .video ul{width:2400px;position:absolute;}
.cont1 .videopar .video dt,.cont1 .videopar .video li{float:left;width:800px;height:450px;line-height:0;transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;position:relative;}
.mp3{width:100%;height:30px;text-align:center;position:absolute;bottom:-46px;left:0;}
.mp3 a,.mp3 a:hover{color:#73aaf4;}
.cont1 .videopar .video dt span,.cont1 .videopar .video li span{position:absolute;width:113px;height:113px;background:url("../images/btn_video.png") no-repeat center;top:50%;left:50%;margin:-52px 0 0 -52px;cursor:pointer;}
.cont1 .videopar .video .v{position:absolute;top:0;left:0;width:800px;height:450px;}
/*=================================================================*/
.cont2{position:relative;width:100%;height:100%;overflow:hidden;}
.cont2 .img0,.cont2 .img1,.cont2 .img2,.cont2 .img3,.cont2 .img4,.cont2 .img5,.cont2 .img6,.cont2 .img7,.cont2 .img8,.cont2 .img9,.cont2 .img10,.cont2 .img11,.cont2 .img12,.cont2 .img13,.cont2 .img14{position:absolute;left:50%;top:50%;}
.cont2 .img6,.cont2 .img7,.cont2 .img8,.cont2 .img10,.cont2 .img11,.cont2 .img13{transition:all .6s ease;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;}
.cont2 .img0,.cont2 .img1,.cont2 .img2{/*第一动画*/
transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;}
.cont2 .img0{width:900px;height:560px;margin:0px 0 0 -450px;opacity:0;}
.cont2 .img0_ani{opacity:1;margin:-240px 0 0 -450px;}
.cont2 .img1{width:1080px;height:58px;margin:488px 0 0 -499px;opacity:0;}
.cont2 .img1_ani{margin:246px 0 0 -499px;opacity:1;}
.cont2 .img2{width:280px;height:280px;margin:211px 0 0 -395px;opacity:0;}
.cont2 .img2_ani{margin:-27px 0 0 -395px;opacity:1;}
.cont2 .img3,.cont2 .img4,.cont2 .img5{transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;opacity:0;}
.cont2 .img3{width:188px;height:116px;margin:161px 0 0 0px;}
.cont2 .img3_ani{margin:161px 0 0 -471px;opacity:1;}
.cont2 .img4{width:326px;height:200px;margin:76px 0 0 -200px;}
.cont2 .img4_ani{margin:76px 0 0 234px;opacity:1;}
.cont2 .img5{width:0;height:0;overflow:hidden;margin:200px 0 0 -50px;}
.cont2 .img5_ani{width:170px;height:250px;margin:-32px 0 0 336px;opacity:1;}
.cont2 .img6,.cont2 .img7{width:110px;height:110px;margin:74px 0 0 -365px;opacity:0;transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-o-transform:scale(.7);}
.cont2 .img6_ani{-webkit-animation:rotate 4s linear infinite;-moz-animation:rotate 4s linear infinite;-o-animation:rotate 4s linear infinite;animation:rotate 4s linear infinite;}
@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform:rotate(0deg)}
to{-moz-transform:rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform:rotate(0deg)}
to{-o-transform:rotate(359deg)}
}
@keyframes rotate{from{transform:rotate(0deg)}
to{transform:rotate(359deg)}
}
.cont2 .img7{margin:133px 0 0 -289px;}
.cont2 .img7_ani{-webkit-animation:rotate1 4s linear infinite;-moz-animation:rotate1 4s linear infinite;-o-animation:rotate1 4s linear infinite;animation:rotate1 4s linear infinite;}
@-webkit-keyframes rotate1{from{-webkit-transform:rotate(360deg)}
to{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes rotate1{from{-moz-transform:rotate(359deg)}
to{-moz-transform:rotate(0deg)}
}
@-o-keyframes rotate1{from{-o-transform:rotate(359deg)}
to{-o-transform:rotate(0deg)}
}
@keyframes rotate1{from{transform:rotate(359deg)}
to{transform:rotate(0deg)}
}
.cont2 .img8 dt,.cont2 .img9 dt,.cont2 .img10 dt,.cont2 .img11 dt{font-size:25px;}
.cont2 .img8{overflow:hidden;text-align:center;width:210px;height:110px;margin:-80px 0 0 -360px;background:url("../images/cont2_img8.png") no-repeat;opacity:0;}
.cont2 .img8_ani{opacity:1;margin:-120px 0 0 -360px;}
.cont2 .img8 dt{padding:18px 0 5px 0;}
.cont2 .img8 dd{line-height:21px;}
.cont2 .img9{overflow:hidden;text-align:center;transition:all 1s ease;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;width:250px;height:114px;margin:130px 0 0 4px;background:url("../images/cont2_img9.png") no-repeat;opacity:0;transform-origin:100% 100%;-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);}
.cont2 .img9_ani{opacity:1;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);}
.cont2 .img9 dt{padding:9px 0 2px 0;}
.cont2 .img9 dd{line-height:21px;}
.cont2 .img10,.cont2 .img11{width:240px;height:116px;background:url("../images/cont2_img10.png") no-repeat center top;overflow:hidden;text-align:center;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;margin:5px 0 0 -132px;opacity:0;}
.cont2 .img11{margin:4px 0 0 130px;background:url("../images/cont2_img11.png") no-repeat center top;}
.cont2 .img10_ani,.cont2 .img11_ani{opacity:1;margin-top:-35px;}
.cont2 .img10 dt,.cont2 .img11 dt{padding:12px 0 10px 0;color:#fff;margin-bottom:10px;}
.cont2 .img10 dd,.cont2 .img11 dd{line-height:20px;}
.cont2 .img12{overflow:hidden;width:36px;height:0;margin:80px 0 0 325px;transition:all .2s .35s ease;-webkit-transition:all .2s .35s ease;-moz-transition:all .2s .35s ease;-o-transition:all .2s .35s ease;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-o-transform:rotate(-30deg);}
.cont2 .img12_ani{height:138px;transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);}
.cont2 .img13{width:78px;height:78px;margin:222px 0 0 300px;opacity:0;transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-o-transform:scale(.7);}
.cont2 .img13_ani{-webkit-animation:arrowSmall .85s linear normal;}
@-webkit-keyframes arrowSmall{0%{-webkit-transform:rotateY(0deg);}
25%{-webkit-transform:rotateY(360deg);}
50%{-webkit-transform:rotateY(0deg);}
75%{-webkit-transform:rotateY(360deg);}
100%{-webkit-transform:rotateY(0deg);}
}
.cont2 .img14{width:1410px;height:929px;margin:-450px -705px;}
/*=================================================================*/
.cont3 .img0_consub1,.cont3 .img1_consub1,.cont3 .img2_consub1,.cont3 .img3_consub1,.cont3 .img4_consub1,.cont3 .img5_consub1,.cont3 .img6_consub1,.cont3 .img7_consub1,.cont3 .img8_consub1{position:absolute;left:50%;top:50%;}
.cont3 .img1_consub1,.cont3 .img2_consub1,.cont3 .img3_consub1,.cont3 .img6_consub1,.cont3 .img7_consub1,.cont3 .img8_consub1{transition:all .6s ease;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;}
.tit-consub1{margin:-270px 0 0 -390px;position:absolute;top:50%;left:50%;color:#fff;font-size:40px;height:50px;line-height:50px;width:640px;opacity:0;}
.cont3 .img0_consub1{width:1300px;height:830px;margin:0px 0 0 -646px;transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;opacity:0;}
.cont3 .img0_ani{margin:-320px 0 0 -646px;opacity:1;}
.cont3 .img1_consub1{width:380px;height:540px;margin:-236px 0 0 -441px;opacity:0;transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);}
.cont3 .img2_consub1{width:200px;height:250px;margin:-182px 0 0 -59px;opacity:0;transform-origin:0% 50%;-webkit-transform-origin:0% 50%;-moz-transform-origin:0% 50%;-o-transform-origin:0% 50%;transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);}
.cont3 .img3_consub1{width:133px;height:197px;margin:-36px 0 0 -230px;opacity:0;transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(.1);-o-transform:scale(.1);}
.cont3 .img1_ani,.cont3 .img2_ani,.cont3 .img3_ani{opacity:1;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);}
.cont3 .img4_consub1{width:240px;height:100px;margin:-172px 0 0 167px;background:url("../images/cont2_consub1_img4.png") no-repeat center top;text-align:center;padding-left:14px;opacity:0;transform-origin:0% 50%;-webkit-transform-origin:0% 50%;-moz-transform-origin:0% 50%;-o-transform-origin:0% 50%;transform:scaleX(.01);-webkit-transform:scaleX(.01);-moz-transform:scaleX(.01);-o-transform:scaleX(.01);}
.cont3 .img4_consub1 dt,.cont3 .img5_consub1 dt{font-size:25px;padding:10px 0 5px;}
.cont3 .img4_consub1 dd,.cont3 .img5_consub1 dd{line-height:21px;}
.cont3 .img5_consub1{width:250px;height:100px;margin:29px 0 0 -492px;background:url("../images/cont2_consub1_img5.png") no-repeat center top;text-align:center;padding-right:16px;opacity:0;transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform:scaleX(.01);-webkit-transform:scaleX(.01);-moz-transform:scaleX(.01);-o-transform:scaleX(.01);}
.cont3 .img4_ani,.cont3 .img5_ani{transition:all .6s ease;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;opacity:1;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);}
.cont3 .img6_consub1,.cont3 .img7_consub1{overflow:hidden;width:240px;height:120px;margin:56px 0 0 90px;background:url("../images/cont2_consub1_img6.png") no-repeat center top;text-align:center;opacity:0;transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform:scaleY(.01);-webkit-transform:scaleY(.01);-moz-transform:scaleY(.01);-o-transform:scaleY(.01);}
.cont3 .img6_ani,.cont3 .img7_ani{opacity:1;transform:scaleY(1);-webkit-transform:scaleY(1);-moz-transform:scaleY(1);-o-transform:scaleY(1);}
.cont3 .img7_consub1{margin:169px 0 0 -110px;background:url("../images/cont2_consub1_img7.png") no-repeat center top;}
.cont3 .img6_consub1 dt,.cont3 .img7_consub1 dt{line-height:60px;color:#fff;font-size:25px;}
.cont3 .img8_consub1{width:100px;height:100px;margin:20px 0 0 358px;opacity:0;transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-o-transform:scale(.7);}
/*=================================================================*/
.cont4 .img0,.cont4 .img1,.cont4 .img2,.cont4 .img3,.cont4 .img4,.cont4 .img5,.cont4 .img6,.cont4 .img8,.cont4 .img9,.cont4 .img10{position:absolute;left:50%;top:50%;}
.cont4 .img1,.cont4 .img2,.cont4 .img3,.cont4 .img4{transition:all .6s ease;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;}
.tit-consub2{position:absolute;top:50%;left:50%;color:#fff;font-size:40px;height:50px;line-height:50px;margin:-260px 0 0 -390px;width:640px;opacity:0;}
.cont4 .img0{width:1200px;height:700px;margin:-310px 0 0 -200px;transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;opacity:0;}
.cont4 .img0_ani{opacity:1;margin:-310px 0 0 -600px;}
.cont4 .img1{overflow:hidden;width:250px;height:116px;margin:-42px 0 0 -384px;background:url("../images/cont2_consub2_img1.png") no-repeat center top;opacity:0;}
.cont4 .img1_ani{opacity:1;margin:-82px 0 0 -384px;}
.cont4 .img2{width:290px;height:106px;margin:-145px 0 0 215px;background:url("../images/cont2_consub2_img2.png") no-repeat center top;opacity:0;transform-origin:0% 50%;-webkit-transform-origin:0% 50%;-moz-transform-origin:0% 50%;-o-transform-origin:0% 50%;transform:scaleX(.01);-webkit-transform:scaleX(.01);-moz-transform:scaleX(.01);-o-transform:scaleX(.01);}
.cont4 .img2_ani{opacity:1;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);}
.cont4 .img1,.cont4 .img2{text-align:center;}
.cont4 .img1 dt,.cont4 .img2 dt{font-size:25px;padding:26px 0 5px 0;}
.cont4 .img1 dd,.cont4 .img2 dd{line-height:20px;}
.cont4 .img3{overflow:hidden;width:250px;height:120px;margin:-19px 0 0 -90px;background:url("../images/cont2_consub2_img3.png") no-repeat center top;text-align:center;opacity:0;}
.cont4 .img3_ani{opacity:1;margin:-59px 0 0 -90px;}
.cont4 .img3 dt{line-height:60px;color:#fff;font-size:25px;padding:0 0 6px 0;}
.cont4 .img3 dd{line-height:22px;}
.cont4 .img4{width:100px;height:100px;margin:110px 0 0 -284px;opacity:0;transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-o-transform:scale(.7);}
.cont4 .img4_ani{opacity:1;transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);}
.cont4 .img5{overflow:hidden;width:218px;height:90px;margin:52px 0 0 -188px;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transform:rotate(-16deg);-webkit-transform:rotate(-16deg);-moz-transform:rotate(-16deg);-o-transform:rotate(-16deg);transform-origin:100% 0%;-webkit-transform-origin:100% 0%;-moz-transform-origin:100% 0%;-o-transform-origin:100% 0%;transform:scaleX(.01);-webkit-transform:scaleX(.01);-moz-transform:scaleX(.01);-o-transform:scaleX(.01);opacity:0;}
.cont4 .img5_ani{transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);opacity:1;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);}
.cont4 .img6{width:340px;height:250px;margin:55px 0 0 -54px;background:url("../images/cont2_consub2_img6.png") no-repeat center top;text-align:center;line-height:220px;position:relative;overflow:hidden;transition:all .6s ease;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;opacity:0;}
.cont4 .img6_ani{margin:55px 0 0 54px;opacity:1;}
.cont4 .img6 img{position:absolute;top:50%;left:50%;margin:-52px 0 0 -52px;}
.cont4 .img8{width:0;height:0;margin:-5px 0 0 311px;overflow:hidden;}
.cont4 .img8_ani{width:98px;height:76px;animation:kf_cont4_img8 1s linear normal;-webkit-animation:kf_cont4_img8 1s linear normal;-moz-animation:kf_cont4_img8 1s linear normal;-o-animation:kf_cont4_img8 1s linear normal;}
@keyframes kf_cont4_img8{0%{width:0;height:0;}
32%{width:0;height:0;}
62%{width:0;height:0;}
80%{width:98px;}
100%{height:76px;}
}
@-webkit-keyframes kf_cont4_img8{0%{width:0;height:0;}
32%{width:0;height:0;}
62%{width:0;height:0;}
80%{width:98px;}
100%{height:76px;}
}
@-moz-keyframes kf_cont4_img8{0%{width:0;height:0;}
32%{width:0;height:0;}
62%{width:0;height:0;}
80%{width:98px;}
100%{height:76px;}
}
@-o-keyframes kf_cont4_img8{0%{width:0;height:0;}
32%{width:0;height:0;}
62%{width:0;height:0;}
80%{width:98px;}
100%{height:76px;}
}
.cont4 .img9{width:150px;height:200px;margin:85px 0 0 150px;transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;opacity:0;}
.cont4 .img9_ani{margin:85px 0 0 330px;opacity:1;}
.cont4 .img9 ul{width:85px;height:150px;position:absolute;top:17px;left:35px;overflow:hidden;}
.cont4 .img9 ul li{overflow:hidden;width:36px;height:36px;position:absolute;top:-40px;left:10px;transition:all .15s ease;-webkit-transition:all .15s ease;-moz-transition:all .15s ease;-o-transition:all .15s ease;}
.cont4 .img9 ul .item1{left:44px;}
.cont4 .img9 ul .item2{left:10px;}
.cont4 .img9 ul .item0_ani{top:15px;}
.cont4 .img9 ul .item1_ani{top:60px;}
.cont4 .img9 ul .item2_ani{top:100px;}
.cont4 .img10{width:106px;text-align:center;opacity:0;margin:54px 0 0 -446px;transition:all .4s ease;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-o-transition:all .4s ease;}
.cont4 .img10 dt{width:106px;height:106px;line-height:0;}
.cont4 .img10 dd{line-height:18px;color:#fff;font-size:12px;}
.cont4 .img10_ani{opacity:1;margin:54px 0 0 -406px;}
.flinks{width:928px;height:40px;padding:0 10px;border:1px solid #1c3962;position:absolute;bottom:130px;left:50%;margin-left:-475px;overflow:hidden;}
.flinks dd{line-height:16px;height:16px;color:#7083a2;float:left;display:inline;padding:12px 0;}
.flinks dd a{display:block;height:16px;line-height:16px;color:#7083a2;border-left:1px solid #7083a2;padding:0 10px;font-size:12px;float:left;}
.flinks dd span{position:relative;top:-1px;}
.flinks dt{cursor:pointer;position:absolute;top:13px;right:10px;width:13px;height:13px;background:url("../images/cont4_downlist.png") no-repeat;}
.flinks_sel{height:auto;}
.flinks_sel dt{background:url("../images/cont4_downlist_.png") no-repeat;}
.foot{background:#1c2847;height:105px;text-align:center;position:absolute;width:100%;bottom:0;}
.foot dt{padding:20px 0 10px;color:#c6cbde;}
.foot dt a{color:#c6cbde;}
.foot dt a:hover{color:#5096f4;}
.foot dd{color:#969fbe;}
/*=========================================*/
.cWin{opacity:0;width:316px;height:316px;background:url("../images/cont4_winbg.png") no-repeat -1300px -100px;position:absolute;top:50%;left:50%;margin:-107px 0 0 -495px;line-height:0;-webkit-animation:water-front-animation 160s infinite linear;-moz-animation:water-front-animation 160s infinite linear;-o-animation:water-front-animation 160s infinite linear;animation:water-front-animation 160s infinite linear;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;}
@-webkit-keyframes water-front-animation{0%{background-position:-1300px -100px;}
50%{background-position:0px -100px;}
100%{background-position:-1301px -100px;}
}
@-moz-keyframes water-front-animation{0%{background-position:-1300px -100px;}
50%{background-position:0px -100px;}
100%{background-position:-1301px -100px;}
}
@-o-keyframes water-front-animation{0%{background-position:-1300px -100px;}
50%{background-position:0px -100px;}
100%{background-position:-1301px -100px;}
}
@keyframes water-front-animation{0%{background-position:-1300px -100px;}
50%{background-position:0px -100px;}
100%{background-position:-1301px -100px;}
}
.cWin_ani{margin:-167px 0 0 -495px;opacity:1;}
/*common animation*/
.com_ani_rotate{-webkit-animation:rotate 4s linear infinite;-moz-animation:rotate 4s linear infinite;-o-animation:rotate 4s linear infinite;animation:rotate 4s linear infinite;}
.com_ani_scale_1{opacity:1 !important;transform:scale(1) !important;-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;}
/*add by xiesw for 新闻列表*/
.list-news li{list-style-type:none;line-height:32px;font-size:16px;padding-left:17px;}
.list-news li span{display:inline-block;width:410px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.list-news li em{margin-left:5px;font:14px/32px arial;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
5.26 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
5.26 MB
立即下载
邹倩珍瑞
了解
打赏作者 鼓励作者
Html 滑动滚动特效
最新结算
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
打赏文章