[ CSOL ] - zihao + 自适应 + 文字滚动 + 媒体查询 + fullpage + 手风琴 + 延时动画

fullpage

$(".fullpage-container").fullpage({
	sectionsColor : ['#ccc', '#fff','#ccc', '#fff'],
	navigation: true,
	navigationTooltips: ['1', '2','3','4'],
	navigationPosition: 'left',
	loopBottom: false,
	loopTop: false,
	//afterLoad : function( anchorLink , index  ){
	//	console.log(anchorLink);
	//},
	//在当前屏离开之前会执行下面的方法。
	onLeave: function (index, nextIndex, direction) {
		//nextIndex // 下一屏
		//direction // 方向
		//index //当前屏
		if( index !==2 ){
			$(".section01").animate({'opacity':'0'},500);
		}
		if( index == 2 ){
			$(".section01").css({'opacity':'1'});
		}
		$("[amt]").each(function( index , element ){
			var amt = $(element).attr('amt');
			$(element).removeClass(amt);
		});
		$('.section').eq(nextIndex-1).find('[amt]').each(function( index , elem) {
			$(elem).addClass($(elem).attr('amt'))
		})
	}
});

文字滚动

/*----  文字滚动 ----------*/
.marquee_box { width: 726px; height: 80px; overflow: hidden; position: absolute; top: 0px; left: 0; z-index: 999; background: url(images/marque.png?123) no-repeat; }
/*background: url(images/marque.jpg) no-repeat;*/
.marquee_box .mq { width: 846px; height: 80px;  overflow: hidden; position: relative; left: 280px; }
.marquee_box .marquee{color:#fff;padding:0 0;width:500px;margin-left:50px;height:80px;line-height:80px;font-size: 20px;}
.marquee_box .marquee{
animation: marqueeT 10s linear infinite;
    white-space: nowrap;
    position: absolute;
}
@keyframes marquee{0%{left:1%}
100%{left:-100%}
}
@keyframes marqueeT{0%{left:1%}
100%{left:-100%}
}
/*----  文字滚动 ----------*/

<div class="marquee_box">
	<div class="mq">
		<p class="marquee">上线就送双重免费豪华大礼包，2个大礼包领完瞬间起飞!赠送上古四大神器！</p>
	</div>
</div>

延时动画

/*----  延时动画 ----------*/
.section01 ul .list1{animation-delay:0.4s;-moz-animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
.section01 ul .list2{animation-delay:0.6s;-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;}
.section01 ul .list3{animation-delay:0.8s;-moz-animation-delay: 0.8s;-webkit-animation-delay: 0.8s;}
.section01 ul .list4{animation-delay:1.0s;-moz-animation-delay: 1.0s;-webkit-animation-delay: 1.0s;}
.section01 ul .list5{animation-delay:1.2s;-moz-animation-delay: 1.2s;-webkit-animation-delay: 1.2s;}

媒体查询

@media screen and (max-width:1920px){
	.section01 .themname{transform: scale(1.1) !important;}
}
@media screen and (max-width:1820px){
	.section01 .themname{transform: scale(1) !important;}
}
@media screen and (max-width:1720px){
	.section01 .themname{transform: scale(0.9) !important;}
}
@media screen and (max-width:1666px){
	.marquee_box{width: 640px;transform: scale(0.85);left: -64px;}
	.nav-top{transform: scale(0.85);}
	.toplogo{transform: scale(0.85);}
	.buttomlogo{transform: scale(0.85); margin-left: -920px;}
	.section04 .container p {left: -140px !important;}
}
@media screen and (max-width:1555px){
	.marquee_box{width: 640px;transform: scale(0.8);left: -64px;}
	.nav-top{transform: scale(0.8);}
	.toplogo{transform: scale(0.8);}
	.buttomlogo{transform: scale(0.8);margin-left: -920px;}
	.section04 .container p {left: -170px !important;}
	.section01 .themname{transform: scale(0.9) !important;}
}
@media screen and (max-width:1444px){
	.marquee_box{width: 640px;transform: scale(0.75);left: -84px;}
	.nav-top{transform: scale(0.75);}
	.toplogo{transform: scale(0.75);}-890px
	.buttomlogo{transform: scale(0.75);margin-left: -890px;}
	.section04 .container p {left: -320px !important;}
	.section01 .themname{transform: scale(0.8) !important;}
}
@media screen and (max-width:1244px){
	.marquee_box{width: 640px;transform: scale(0.70);left: -84px;}
	.nav-top{transform: scale(0.70);}
	.toplogo{transform: scale(0.70);}
	.buttomlogo{transform: scale(0.70);margin-left: -842px;}
	.section04 .container p {left: -270px !important;}
	.section01 .themname{transform: scale(0.7) !important;}
}
@media screen and (max-width:1244px){
	.section04 .container p{left: -360px !important;}
}

手风琴

/*----  手风琴-旋转-弹跳 ----------*/
.box { height: 564px; width: 1087px; position: absolute; top: 200px; left: 50%; margin-left: -580px;z-index: 9999;}
.box .tab{position: relative;float: left;overflow: hidden;width: 181px;height: 564px;}
.box .tab .rightbtn{display:block;background:url(images/tab.png) no-repeat;width: 181px;height: 564px;position: absolute;right:0px;cursor: default;}
.box .tab .pic{position: absolute;display:none;}
.box .tab.on{width:544px;z-index: 1;}
.box .tab.on .pic{display:block;}
.box .tab.on .rightbtn{display:none;}
.box .tab .spot { width: 122px; height: 20px; position: absolute; bottom: 20px; left: 30px; z-index: 1;display:none; }
.box .tab .spot .spotbtn { width: 20px; height: 20px; background: #CDCDCD; display: block; float: left; margin-right: 10px; border-radius: 15px; }
.box .tab .spot .spotbtn.active{background:#f00;}
.box .tab.on .spot{display:block;}
.box .tab1 .rightbtn{background-position:0 0;position: absolute;}
.box .tab2 .rightbtn{background-position:-182px 0;}
.box .tab3 .rightbtn{background-position:-364px 0;}
.box .tab4 .rightbtn{background-position:-546px 0;}
.box .note { clear: both; color: #fff; line-height: 30px; padding: 20px 20px; font-size: 16px; }
/*----  手风琴-旋转-弹跳 结束 ----------*/

	//----- 手风琴-旋转-弹跳  开始---------------------------
	accordion();
	function accordion(){
		var spot = ""
		for(var i = 0; i < 4; i ++ ){
			spot += '<a href="javascript:;" class="spotbtn"></a>'
		}
		$(".box .spot").append(spot);
		$(".box .tab1 .spot .spotbtn").eq(0).addClass("active");
		$('.box .tab').each(function(i){
			$(this).click(function(){
				$(this).addClass("on").siblings().removeClass("on");
				//----- 动画1  ---------------------------
				$(this).addClass("animated pulse").siblings().removeClass("animated pulse");
				//----- 动画2  ---------------------------
				//$(this).addClass("animated rotateInDownLeft").siblings().removeClass("animated rotateInDownLeft");
				$(this).find(".spot a").eq(i).addClass("active")
			});
		});
	};
	//var interval1 = setInterval(function(){}, 1000);
	function func(){
		$('.box .tab').each(function(i){
			$(this).find(".spot a").eq(i).addClass("active")
		});
		$('.box .tab.on').next(".tab").addClass("on animated pulse").siblings(".tab").removeClass("on animated pulse");
		if( $('.tab.tab4').hasClass("on") ){
			clearInterval(interval);
			setTimeout(function(){
				$('.box .tab4').removeClass("on");
				$('.box .tab1').addClass("on animated pulse");
					interval = setInterval(func, 2000);
			},2000)
		}
	}
	var interval = setInterval(func, 2000);
	$('.box').hover(function(){
	    clearInterval(interval);
	},function(){
		interval = setInterval(func, 2000);
	});
	//----- 手风琴-旋转-弹跳  结束---------------------------

自适应

//----- 自适应  开始---------------------------
	function md(){
		var width = $(window).width(),height = $(window).height();
		var wdWidth = window.screen.width,wdHeight = window.screen.height;
		var boxTop = (height-600)/2;
		var videoTop = (height-613)/2;
		$(".section01 .themname").css({'top': 0.4935*height });
		$(".box").css({'top': boxTop });
		$(".videoplay").css({'top': boxTop });
		var tform = width/1889;
		if( wdWidth = 1920 ){
			$(".bgVideo1").css({'width': '1920px', 'margin-left': '-960px','top': '0px' });
			$(".buttombtn").css({'top': '811px' });
		}
		$(".bgVideo1").css({'width': 1.9592*height, 'margin-left': -1.9592*height/2 ,'top': '0' });
		$(".buttombtn").css({'top': 0.7609*height });
		$(".section01 .themname,.buttombtn,.download,.box,.videoplay").css({'transform':'scale('+tform+')'});
		$(".layertop").css({'width': width,'height': height,'margin-left': -width/2  });
		$(".layermain").css({'width': width*0.99,'height': height,'margin-left': -width*0.99/2  });
		$(".nav-top").css({'margin-left': 0.0715*width });
		var width2 = $(window).width();
//		if( width2 < 1800  ){$(".section04 .container p").css({'left':'-100px'});}
//		if( width2 < 1600  ){$(".section04 .container p").css({'left':'-130px'});}
//		if( width2 < 1500  ){$(".section04 .container p").css({'left':'-190px'});}
//		if( width2 < 1400  ){$(".section04 .container p").css({'left':'-250px'});}
	}
	md();
	//----- 自适应  结束---------------------------

fullpage调用参数设置

<script type="text/javascript">
	$(".section01,.bgVideo1").fadeIn(500)
	$(".section02").fadeIn(1500);
	$(".section03").fadeIn(2000);
	$(".section04").fadeIn(2500);
	$(".fullpage-container").fullpage({
		sectionsColor : ['#ccc', '#fff','#ccc', '#fff'],
		navigation: false,
		navigationTooltips: ['1', '2','3','4'],
		navigationPosition: 'left',
		loopBottom: false,
		loopTop: false,
		//afterLoad : function( anchorLink , index  ){
		//	console.log(anchorLink);
		//},
		//在当前屏离开之前会执行下面的方法。
		onLeave: function (index, nextIndex, direction) {
			//console.log(index); //当前屏
			if( index == 1 ){
				//alert(1);
				$(".section01").animate({'opacity':'0'},500);
				$(".section02").animate({'opacity':'1'},200);
				$(".bgVideo1").fadeOut(500);
			}
			if( index == 2 ){
				//alert(2);
				$(".section01").animate({'opacity':'1'},200);
				$(".section02").animate({'opacity':'0'},500);
				document.querySelector('#myVideo1').play();
				document.querySelector('#myVideo2').play();
				$(".bgVideo1").show(200);
			}
			if( index == 3 ){
				document.querySelector('#myVideo2').play();
				$(".videoplay").attr('amt','animated zoomIn');
				$(".section02").animate({'opacity':'1'},200);
				$(".section01").animate({'opacity':'0'},500);
				$(".bgVideo1").hide();
			}
			if( index == 4 ){
				$(".videoplay").attr('amt','zoomIn');
				$(".section03").animate({'opacity':'1'},200);
				document.querySelector('#myVideo1').play();
				document.querySelector('#myVideo2').play();
			}
			//console.log(nextIndex); // 下一屏
			//console.log(direction); // 方向
			$("[amt]").each(function( index , element ){
				var amt = $(element).attr('amt');
//				console.log(amt);
				$(element).removeClass(amt);
			});
			$('.section').eq(nextIndex-1).find('[amt]').each(function( index , elem) {
				    $(elem).addClass($(elem).attr('amt'))
			})
		}
	});
</script>

fullpage 滚动视频无法播放（video标签+“data-keepplaying” 参数）

<video class="bgVideo bgVideo2" id="myVideo2" data-keepplaying src="https://9ojq0z59xdu9.oss-accelerate.aliyuncs.com/mlsp2.mp4" autoplay="autoplay" loop="loop" controls muted="muted" x-webkit-airplay="allow" x5-playsinline="" webkit-playsinline="" playsinline="true"></video>

视频自动播放

$(function () {
  function videoPlay() {
    $('video').each(function (i, e) {
      $('video').get(i).play();
    });
  }
  videoPlay();
});
</script>

html 源代码

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta charset="UTF-8">
<title>让你一次爽个够</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.css">
<link rel="stylesheet" type="text/css" href="https://img1.tiancitycdn.com/project1/csol/event/2017/10/cs171018event/css/animate.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://img1.tiancitycdn.com/project1/csol/event/cs160203act/css/basic.css">
<style type="text/css">
*{margin:0px;padding:0px;}
img{border:none;}
body {opacity:1.5;}
.fullpage-container{}
.fp-tableCell{}
.container { width: 100%; }
.bgVideo1{ width:1920px;position: absolute; top: 0; left: 50%; margin-left: -960px;z-index:1;display:none;}
.bgVideo2{display:block;}
.section{background-color:#000 !important;}
.section01{background-image:url(images/bg1.jpg);background-size: cover;display:none;}
.section02{background-image:url(images/bg2.jpg);background-size: cover;display:none;}
.section03{background-image:url(images/bg3.jpg);background-size: cover;display:none;}
.section04 { background: #252525 !important;height: 100px !important; display:none; }
.section04 .container { height: 100px !important; color: #A6A6A6; text-align: center; width: 1920px; margin: 0 auto; position: relative; }
.section04 .container p { width: 100%; text-align: center; color: #A6A6A6; margin: 35px auto 0; line-height: 22px; letter-spacing: 2px; position: relative;}
.section04 .container p a { display: inline-block; color: #A6A6A6; }
.section04 .container p a:hover{color:#f00;text-decoration:underline;}
.section04 .container p a img { display: inline-block; padding: 0px 6px 0 0px; position: relative; top: 4px; }
/*.section04 .fp-tableCell { background: #252525; position: absolute; left: 50%; margin-left: -1250px; }*/
/*----  首页开始 ----------*/
.section01 .themname { width: 801px; height: 301px; position: absolute; left: 50%; margin-left: -318px; top: 540px; z-index: 10; }
.section01 ul{width: 113%;height:100%;margin:0 auto;}
.section01 ul li{background:url(images/list.png) no-repeat;width: 81px;height: 270px;float:left;margin-right: 60px;}
.section01 ul .list1{background-position:-13px -13px;}
.section01 ul .list2{background-position:-100px -13px;}
.section01 ul .list3{background-position:-187px -13px;}
.section01 ul .list4{background-position:-274px -13px;}
.section01 ul .list5{background-position:-361px -13px;}
.buttombtn { width: 800px; height: 107px; position: absolute; left: 50%; margin-left: -401px; top: 887px; z-index: 10; }
.buttombtn a{width: 313px;height: 107px;position: absolute;}
/*.buttombtn a:hover{background:url(images/list.png) no-repeat;}*/
.buttombtn .btn1{float:left;background-position:-475px -147px !important;top: 3px;left: 14px;}
.buttombtn .btn2{float:right;background-position:-475px -20px !important;top: 3px;right: 23px;}
/*----  首页结束 ----------*/
.layertop{background:url(images/layertop.png?12) no-repeat;width:1920px;height:1072px;position: absolute;top:0px;left:50%;margin-left:-960px;z-index:10;    background-size: cover;}
.layermain{background:url(images/layermain.png) no-repeat;width:1920px;height:1072px;position: absolute;top:0px;left:50%;z-index:10;    background-size: 100% 100%;}
.nav-top { width: 881px; position: absolute; top: 7px; left: 50%; margin-left: 145px; z-index: 10;background:url(images/nav-bg.png?123) no-repeat; }
.nav-top .btn{background:url(images/nav-bg1.png?1) no-repeat;width:190px;height:62px;float:left;}
.nav-top .btn:hover { transform: scale(0.95); transition: 0.2s; }
.nav-top .btn1{background-position:45px 12px;}
.nav-top .btn2{background-position:-143px 12px;}
.nav-top .btn3{background-position:-329px 12px;}
.nav-top .btn4{background-position:-516px 12px;}
/*----  延时动画 ----------*/
.section01 ul .list1{animation-delay:0.4s;-moz-animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
.section01 ul .list2{animation-delay:0.6s;-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;}
.section01 ul .list3{animation-delay:0.8s;-moz-animation-delay: 0.8s;-webkit-animation-delay: 0.8s;}
.section01 ul .list4{animation-delay:1.0s;-moz-animation-delay: 1.0s;-webkit-animation-delay: 1.0s;}
.section01 ul .list5{animation-delay:1.2s;-moz-animation-delay: 1.2s;-webkit-animation-delay: 1.2s;}
/*----  手风琴-旋转-弹跳 ----------*/
.box { height: 564px; width: 1087px; position: absolute; top: 200px; left: 50%; margin-left: -580px;z-index: 9999;}
.box .tab{position: relative;float: left;overflow: hidden;width: 181px;height: 564px;}
.box .tab .rightbtn{display:block;background:url(images/tab.png) no-repeat;width: 181px;height: 564px;position: absolute;right:0px;cursor: default;}
.box .tab .pic{position: absolute;display:none;}
.box .tab.on{width:544px;z-index: 1;}
.box .tab.on .pic{display:block;}
.box .tab.on .rightbtn{display:none;}
.box .tab .spot { width: 122px; height: 20px; position: absolute; bottom: 20px; left: 30px; z-index: 1;display:none; }
.box .tab .spot .spotbtn { width: 20px; height: 20px; background: #CDCDCD; display: block; float: left; margin-right: 10px; border-radius: 15px; }
.box .tab .spot .spotbtn.active{background:#f00;}
.box .tab.on .spot{display:block;}
.box .tab1 .rightbtn{background-position:0 0;position: absolute;}
.box .tab2 .rightbtn{background-position:-182px 0;}
.box .tab3 .rightbtn{background-position:-364px 0;}
.box .tab4 .rightbtn{background-position:-546px 0;}
.box .note { clear: both; color: #fff; line-height: 30px; padding: 20px 20px; font-size: 16px; }
/*----  手风琴-旋转-弹跳 结束 ----------*/
/*----  底部视频 开始 ----------*/
 .videoplay { width: 1127px; height: 613px; background: url(images/video_bg.png) no-repeat; position: absolute; top: 200px; left: 50%; margin-left: -583px; }
.videoplay .videomain{width: 1078px;height: 595px;margin: 0px auto;overflow: hidden;position: relative;top: 10px;border-radius: 20px;}
 .videoplay .videomain .bgVideo2{width: 100%;}
 /*----  底部视频 结束 ----------*/
/*----  下载登录器 ----------*/
.download{width:320px;height:34px;position: absolute;right:100px;top:90px;z-index: 9999;}
.download a{display:block;border:1px solid #fff;text-align:center;width:136px;height:34px;line-height:34px;color:#fff;font-size:16px;}
.download a:hover{box-shadow: 4px 3px 0px 0px #9E9E9E;}
.download .left{float:left;}
.download .right{float:right;}

/*----  文字滚动 ----------*/
.marquee_box { width: 726px; height: 80px; overflow: hidden; position: absolute; top: 0px; left: 0; z-index: 999; background: url(images/marque.png?123) no-repeat; }
/*background: url(images/marque.jpg) no-repeat;*/
.marquee_box .mq { width: 846px; height: 80px;  overflow: hidden; position: relative; left: 280px; }
.marquee_box .marquee{color:#fff;padding:0 0;width:500px;margin-left:50px;height:80px;line-height:80px;font-size: 20px;}
.marquee_box .marquee{
animation: marqueeT 10s linear infinite;
    white-space: nowrap;
    position: absolute;
}
@keyframes marquee{0%{left:1%}
100%{left:-100%}
}
@keyframes marqueeT{0%{left:1%}
100%{left:-100%}
}
/*----  文字滚动 ----------*/
.toplogo { background: url(images/header-logo.png?a) no-repeat; width: 381px; height: 191px; position: absolute; top: 0px; right: 0; z-index: 99; left: 0; margin: auto; }
.buttomlogo { background: url(images/btlogo.png) no-repeat; width: 100%; height: 62px; position: absolute; bottom: 0px; z-index: 999; left: 50%; margin-left: -950px; }
@media screen and (max-width:1920px){
	.section01 .themname{transform: scale(1.1) !important;}
}
@media screen and (max-width:1820px){
	.section01 .themname{transform: scale(1) !important;}
}
@media screen and (max-width:1720px){
	.section01 .themname{transform: scale(0.9) !important;}
}
@media screen and (max-width:1666px){
	.marquee_box{width: 640px;transform: scale(0.85);left: -64px;}
	.nav-top{transform: scale(0.85);}
	.toplogo{transform: scale(0.85);}
	.buttomlogo{transform: scale(0.85); margin-left: -920px;}
	.section04 .container p {left: -140px !important;}
}
@media screen and (max-width:1555px){
	.marquee_box{width: 640px;transform: scale(0.8);left: -64px;}
	.nav-top{transform: scale(0.8);}
	.toplogo{transform: scale(0.8);}
	.buttomlogo{transform: scale(0.8);margin-left: -920px;}
	.section04 .container p {left: -170px !important;}
	.section01 .themname{transform: scale(0.9) !important;}
}
@media screen and (max-width:1444px){
	.marquee_box{width: 640px;transform: scale(0.75);left: -84px;}
	.nav-top{transform: scale(0.75);}
	.toplogo{transform: scale(0.75);}-890px
	.buttomlogo{transform: scale(0.75);margin-left: -890px;}
	.section04 .container p {left: -320px !important;}
	.section01 .themname{transform: scale(0.8) !important;}
}
@media screen and (max-width:1244px){
	.marquee_box{width: 640px;transform: scale(0.70);left: -84px;}
	.nav-top{transform: scale(0.70);}
	.toplogo{transform: scale(0.70);}
	.buttomlogo{transform: scale(0.70);margin-left: -842px;}
	.section04 .container p {left: -270px !important;}
	.section01 .themname{transform: scale(0.7) !important;}
}
@media screen and (max-width:1244px){
	.section04 .container p{left: -360px !important;}
}
/**{box-shadow:0px 0px 0px 1px #fff;}*/
  </style>
 </head>
<body>
<div id="fullpage" class="fullpage-container">
	<div class="section section01">
		<div class="container">
			<div class="marquee_box">
				<div class="mq">
					<p class="marquee">上线就送双重免费豪华大礼包，2个大礼包领完瞬间起飞!赠送上古四大神器！</p>
				</div>
			</div>
			<video class="bgVideo bgVideo1" id="myVideo1" src="https://img1.tiancitycdn.com/project1/csol/event/2020/12/z/video/v.mp4" autoplay="autoplay" loop="loop" muted="muted" x-webkit-airplay="allow" x5-playsinline="" webkit-playsinline="" playsinline="true"></video>
			<div class="layertop"></div>
			<div class="toplogo"></div>
			<div class="buttomlogo"></div>
			<div class="nav-top">
				<a href="javascript:;" class="btn btn1"></a>
				<a href="javascript:;" class="btn btn2"></a>
				<a href="javascript:;" class="btn btn3"></a>
				<a href="javascript:;" class="btn btn4"></a>
			</div>
			<div class="themname">
				<ul>
					<li class="list1 animated fadeInDown"></li>
					<li class="list2 animated fadeInDown"></li>
					<li class="list3 animated fadeInDown"></li>
					<li class="list4 animated fadeInDown"></li>
					<li class="list5 animated fadeInDown"></li>
				</ul>
			</div>
			<div class="buttombtn">
				<a href="javascript:;" class="btn btn1"></a>
				<a href="javascript:;" class="btn btn2"></a>
			</div>
		</div>
	</div>
	<div class="section section02">
		<div class="container">
			<!-- ----- 手风琴 开始---------->
			<div class="download">
				<a href="javascript:;" class="left">下载登录器</a>
				<a href="javascript:;" class="right">在线充值</a>
			</div>
			<div class="layermain"></div>
			<div class="box" amt="animated zoomIn">
				<div class="tab tab1 on">
					<a href="javascript:;" class="rightbtn"></a>
					<div class="pic"><a href="javascript:;" target="_blank"><img src="images/tab1.jpg"></a></div>
					<div class="spot"></div>
				</div>
				<div class="tab tab2">
					<a href="javascript:;" class="rightbtn"></a>
					<div class="pic"><a href="javascript:;" target="_blank"><img src="images/tab2.jpg"></a></div>
					<div class="spot"></div>
				</div>
				<div class="tab tab3">
					<a href="javascript:;" class="rightbtn"></a>
					<div class="pic"><a href="javascript:;" target="_blank"><img src="images/tab3.jpg"></a></div>
					<div class="spot"></div>
				</div>
				<div class="tab tab4">
					<a href="javascript:;" class="rightbtn"></a>
					<div class="pic"><a href="javascript:;" target="_blank"><img src="images/tab4.jpg"></a></div>
					<div class="spot"></div>
				</div>
				<div class="note">本服珍重承诺：长久稳定，绝无假人（现在大部分GM都当玩家傻瓜，用假人滥竽充数，本服绝对没有！） <br />版本特色太多，并非市面上的垃圾版本可比，下载登录器体验5分钟，绝对不会后悔！！！</div>
			</div>
			<!-- ----- 手风琴 结束---------->
		</div>
	</div>
	<div class="section section03">
		<div class="container">
			<div class="download">
				<a href="javascript:;" class="left">下载登录器</a>
				<a href="javascript:;" class="right">在线充值</a>
			</div>
			<div class="layermain"></div>
			<!-- -----  底部视频 开始 ---------->
			<div class="videoplay" amt="animated zoomIn">
				<div class="videomain">
					<video class="bgVideo bgVideo2" id="myVideo2" data-keepplaying src="https://9ojq0z59xdu9.oss-accelerate.aliyuncs.com/mlsp2.mp4" autoplay="autoplay" loop="loop" controls muted="muted" x-webkit-airplay="allow" x5-playsinline="" webkit-playsinline="" playsinline="true"></video>
				</div>
			</div>
			<!-- -----  底部视频 结束 ---------->
		</div>
	</div>
	<div class="section section04 fp-auto-height footer">
		<div class="container">
			<p>
				抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活 <br />
				All rights reserved. 魅璃单职业·独家版本 版权所有 本游戏由【魅璃单职业网络公司】开发运营 <br />
				本网站设计及美工由
<!-- 				<a href="http://wpa.qq.com/pa?p=2:15748542:52"> -->
<!-- 					<img src="images/qqico.png" width="17" height="18" border="0" alt=""> -->
<!-- 				</a> -->
				<a href="http://wpa.qq.com/msgrd?v=3&uin=15748542&site=qq&menu=yes">腾讯设计师离职再就业工作室</a>
				<a href="http://wpa.qq.com/msgrd?v=3&uin=15748542&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:15748542:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
				设计制作，本人只做网站设计，不参与游戏运营，玩家勿扰。 <br />
			</p>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(".section01,.bgVideo1").fadeIn(500)
	$(".section02").fadeIn(1500);
	$(".section03").fadeIn(2000);
	$(".section04").fadeIn(2500);
	$(".fullpage-container").fullpage({
		sectionsColor : ['#ccc', '#fff','#ccc', '#fff'],
		navigation: false,
		navigationTooltips: ['1', '2','3','4'],
		navigationPosition: 'left',
		loopBottom: false,
		loopTop: false,
		//afterLoad : function( anchorLink , index  ){
		//	console.log(anchorLink);
		//},
		//在当前屏离开之前会执行下面的方法。
		onLeave: function (index, nextIndex, direction) {
			//console.log(index); //当前屏
			if( index == 1 ){
				//alert(1);
				$(".section01").animate({'opacity':'0'},500);
				$(".section02").animate({'opacity':'1'},200);
				$(".bgVideo1").fadeOut(500);
			}
			if( index == 2 ){
				//alert(2);
				$(".section01").animate({'opacity':'1'},200);
				$(".section02").animate({'opacity':'0'},500);
				document.querySelector('#myVideo1').play();
				document.querySelector('#myVideo2').play();
				$(".bgVideo1").show(200);
			}
			if( index == 3 ){
				document.querySelector('#myVideo2').play();
				$(".videoplay").attr('amt','animated zoomIn');
				$(".section02").animate({'opacity':'1'},200);
				$(".section01").animate({'opacity':'0'},500);
				$(".bgVideo1").hide();
			}
			if( index == 4 ){
				$(".videoplay").attr('amt','zoomIn');
				$(".section03").animate({'opacity':'1'},200);
				document.querySelector('#myVideo1').play();
				document.querySelector('#myVideo2').play();
			}
			//console.log(nextIndex); // 下一屏
			//console.log(direction); // 方向
			$("[amt]").each(function( index , element ){
				var amt = $(element).attr('amt');
//				console.log(amt);
				$(element).removeClass(amt);
			});
			$('.section').eq(nextIndex-1).find('[amt]').each(function( index , elem) {
				    $(elem).addClass($(elem).attr('amt'))
			})
		}
	});
</script>
<script type="text/javascript">
$(function(){
	//----- 手风琴-旋转-弹跳  开始---------------------------
	accordion();
	function accordion(){
		var spot = ""
		for(var i = 0; i < 4; i ++ ){
			spot += '<a href="javascript:;" class="spotbtn"></a>'
		}
		$(".box .spot").append(spot);
		$(".box .tab1 .spot .spotbtn").eq(0).addClass("active");
		$('.box .tab').each(function(i){
			$(this).click(function(){
				$(this).addClass("on").siblings().removeClass("on");
				//----- 动画1  ---------------------------
				$(this).addClass("animated pulse").siblings().removeClass("animated pulse");
				//----- 动画2  ---------------------------
				//$(this).addClass("animated rotateInDownLeft").siblings().removeClass("animated rotateInDownLeft");
				$(this).find(".spot a").eq(i).addClass("active")
			});
		});
	};
	//var interval1 = setInterval(function(){}, 1000);
	function func(){
		$('.box .tab').each(function(i){
			$(this).find(".spot a").eq(i).addClass("active")
		});
		$('.box .tab.on').next(".tab").addClass("on animated pulse").siblings(".tab").removeClass("on animated pulse");
		if( $('.tab.tab4').hasClass("on") ){
			clearInterval(interval);
			setTimeout(function(){
				$('.box .tab4').removeClass("on");
				$('.box .tab1').addClass("on animated pulse");
					interval = setInterval(func, 2000);
			},2000)
		}
	}
	var interval = setInterval(func, 2000);
	$('.box').hover(function(){
	    clearInterval(interval);
	},function(){
		interval = setInterval(func, 2000);
	});
	//----- 手风琴-旋转-弹跳  结束---------------------------
	//----- 自适应  开始---------------------------
	function md(){
		var width = $(window).width(),height = $(window).height();
		var wdWidth = window.screen.width,wdHeight = window.screen.height;
		var boxTop = (height-600)/2;
		var videoTop = (height-613)/2;
		$(".section01 .themname").css({'top': 0.4935*height });
		$(".box").css({'top': boxTop });
		$(".videoplay").css({'top': boxTop });
		var tform = width/1889;
		if( wdWidth = 1920 ){
			$(".bgVideo1").css({'width': '1920px', 'margin-left': '-960px','top': '0px' });
			$(".buttombtn").css({'top': '811px' });
		}
		$(".bgVideo1").css({'width': 1.9592*height, 'margin-left': -1.9592*height/2 ,'top': '0' });
		$(".buttombtn").css({'top': 0.7609*height });
		$(".section01 .themname,.buttombtn,.download,.box,.videoplay").css({'transform':'scale('+tform+')'});
		$(".layertop").css({'width': width,'height': height,'margin-left': -width/2  });
		$(".layermain").css({'width': width*0.99,'height': height,'margin-left': -width*0.99/2  });
		$(".nav-top").css({'margin-left': 0.0715*width });
		var width2 = $(window).width();
//		if( width2 < 1800  ){$(".section04 .container p").css({'left':'-100px'});}
//		if( width2 < 1600  ){$(".section04 .container p").css({'left':'-130px'});}
//		if( width2 < 1500  ){$(".section04 .container p").css({'left':'-190px'});}
//		if( width2 < 1400  ){$(".section04 .container p").css({'left':'-250px'});}
	}
	md();
	//----- 自适应  结束---------------------------
})
</script>
<script type="text/javascript">
$(function () {
  function videoPlay() {
    $('video').each(function (i, e) {
      $('video').get(i).play();
    });
  }
  videoPlay();
});
</script>
</body>
</html>