老师滚动门不会随着页面的改变而改变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课手机</title>
<link rel="stylesheet" type="text/css" href="css/phone.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div class="total">
<!-- 头部 -->
<header class="header">
<div class="wrap">
<div class="header_logo">慕课手机</div>
<nav class="header_nav">
<a href="javascript:;" class="header_nav-item header_nav-item_active">首页</a>
<a href="javascript:;" class="header_nav-item ">外观</a>
<a href="javascript:;" class="header_nav-item">配置</a>
<a href="javascript:;" class="header_nav-item">型号</a>
<a href="javascript:;" class="header_nav-item">说明</a>
<a href="javascript:;" class="header_nav-item header_nav-item-custom-button">立即购买</a>
<div class="header_nav-tip"></div>
</nav>
</div>
</header>
<!-- 第一屏 -->
<div class="screen-1">
<h2 class="screen-1-heading screen-1-heading_animate_init"><span>慕课手机</span> 让你的生活更精彩</h3>
<div class="screen-1-phone screen-1-phone_animate_init"></div>
<div class="screen-1-shadow screen-1-shadow_animate_init"></div>
</div>
<!-- 第二屏 -->
<div class="screen-2">
<h2 class="screen-2-heading">优美的设计，更令人着迷</h2>
<h3 class="screen-2-sub-heading">采用受欢迎的设计，让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-2-phone">
<div class="screen-2-point screen-2-point_i-1">高清摄像</div>
<div class="screen-2-point screen-2-point-custon-right screen-2-point_i-2">超薄机身</div>
<div class="screen-2-point screen-2-point-custon-right screen-2-point_i-3">大屏显示</div>
</div>
</div>
<!-- 第三屏 -->
<div class="screen-3">
<div class="screen-3-wrap">
<h2 class="screen-3-heading">外形小巧，功能强大的手机</h2>
<h3 class="screen-3-sub-heading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-3-phone"></div>
<div class="screen-3-features">
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">5.7</div>
<div class="screen-3-features-item-desc">英寸大屏</div>
</div>
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">1200</div>
<div class="screen-3-features-item-desc">万像素</div>
</div>
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">3D</div>
<div class="screen-3-features-item-desc">Touch</div>
</div>
<div class="screen-3-features-item">
<div class="screen-3-features-item-number">A9</div>
<div class="screen-3-features-item-desc">处理器</div>
</div>
</div>
</div>
</div>
<!-- 第四屏 -->
<div class="screen-4">
<div class="screen-4-wrap">
<h2 class="screen-4-heading">丰富的手机型号</h2>
<h3 class="screen-4-sub-heading">找到适合你的手机</h3>
</div>
<div class="screen-4-type">
<div class="screen-4-type-item screen-4-type-item_i-1">
<div class="screen-4-type-item-color">慕课红</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
<div class="screen-4-type-item screen-4-type-item_i-2">
<div class="screen-4-type-item-color">土豪金</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
<div class="screen-4-type-item screen-4-type-item_i-3">
<div class="screen-4-type-item-color">太空灰</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
<div class="screen-4-type-item screen-4-type-item_i-4">
<div class="screen-4-type-item-color">绅士黑</div>
<div class="screen-4-type-item-storage">32G/64G/128G</div>
</div>
</div>
</div>
<!-- 第五屏 -->
<div class="screen-5">
<div class="screen-5-wrap">
<h2 class="screen-5-heading">游戏、学习、拍照，有这一部就够了</h2>
<h3 class="screen-5-sub-heading">看视频、拍摄高清视频与照片、视频聊天、通话相结合，一机多功能，让您生活更丰富精彩。
</h3>
</div>
<div class="screen-5-bg"></div>
</div>
<!-- 第六屏 -->
<div class="screen-buy">
<a class="screen-buy-button" href="#">立即购买</a>
</div>
<!-- 页脚 -->
<footer class="footer">© 2016 imooc.com 京ICP备13046642号</footer>
<div class="outline">
<a href="javascript:;" class="outline-item outline-item-status-active">首页</a>
<a href="javascript:;" class="outline-item">外观</a>
<a href="javascript:;" class="outline-item">配置</a>
<a href="javascript:;" class="outline-item">型号</a>
<a href="javascript:;" class="outline-item">说明</a>
</div>
<div>
<script src="js/phone.js"></script>
<script src="js/index.js"></script>
</body>
</html>
//获取元素
var getElem=function(selector){
return document.querySelector(selector);
}
var getAllElem = function(selector){
return document.querySelectorAll(selector);
}
//获取元素样式
var getCls = function(element){
return element.getAttribute('class');
}
//设置元素样式
var setCls = function(element,cls){
return element.setAttribute('class',cls);
}
//为元素添加样式
var addCls = function(element,cls){
var baseCls = getCls(element);
if (baseCls.indexOf(cls) === -1) {
setCls(element,baseCls+' '+cls);
}
}
//为元素删除样式
var delCls = function(element,cls){
var baseCls = getCls(element);
if (baseCls.indexOf(cls)!==-1) {
setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
}
}
//第一步：初始化样式 init
var screenAnimateElements={
'.screen-1':[
'.screen-1-heading',
'.screen-1-phone',
'.screen-1-shadow',
],
'.screen-2':[
'.screen-2-heading',
'.screen-2-phone',
'.screen-2-sub-heading',
'.screen-2-point_i-1',
'.screen-2-point_i-3',
'.screen-2-point_i-2',
],
'.screen-3':[
'.screen-3-heading',
'.screen-3-phone',
'.screen-3-sub-heading',
'.screen-3-features',
],
'.screen-4':[
'.screen-4-heading',
'.screen-4-sub-heading',
'.screen-4-type-item_i-1',
'.screen-4-type-item_i-2',
'.screen-4-type-item_i-3',
'.screen-4-type-item_i-4',
],
'.screen-5':[
'.screen-5-heading',
'.screen-5-bg',
'.screen-5-sub-heading',
]
}
//设置屏内元素为初始状态
var setScreenAnimateInit =function(screenCls){
var screen=document.querySelector(screenCls); //获取当前屏的元素
var animateElements=screenAnimateElements[screenCls]; //需要设置动画的元素
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');
}
}
//设置屏内元素的动画
var playScreenAnimateDone = function(screenCls){
var screen=document.querySelector(screenCls); //获取当前屏的元素
var animateElements=screenAnimateElements[screenCls]; //需要设置动画的元素
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
}
}
window.onload=function(){
for(k in screenAnimateElements){
if (k==='.screen-1') {
continue;
}
setScreenAnimateInit(k);
}
}
//第二步：滚动到那就播放到哪
var navItems = getAllElem('.header_nav-item');
var outlineItems=getAllElem('.outline-item');
var switchNavItemActive = function(idx){
for(var i=0;i<navItems.length;i++){
delCls(navItems[i],'header_nav-item_active');
}
addCls(navItems[idx],'header_nav-item_active');
for(var i=0;i<outlineItems.length;i++){
delCls(outlineItems[i],'outline-item-status-active');
}
addCls(outlineItems[idx],'outline-item-status-active');
}
window.onscroll=function(){
var top = document.body.scrollTop || document.documentElement.scrollTop;
console.log(top);
if (top>80) {
addCls(getElem('.header'),'header_status_black');
addCls(getElem('.outline'),'outline_status_in');
}else{
delCls(getElem('.header'),'header_status_black');
delCls(getElem('.outline'),'outline_status_in');
}
if (top>1) {
playScreenAnimateDone('.screen-1');
switchNavItemActive(0);
}
if (top>800*1-100) {
playScreenAnimateDone('.screen-2');
switchNavItemActive(1);
}
if (top>800*2-100) {
playScreenAnimateDone('.screen-3');
switchNavItemActive(2);
}
if (top>800*3-100) {
playScreenAnimateDone('.screen-4');
switchNavItemActive(3);
}
if (top>800*4-100) {
playScreenAnimateDone('.screen-5');
switchNavItemActive(4);
}
}
// 第三步：双向定位
var setNavJump =function(i,lib){
var item = lib[i];
item.onclick = function(){
document.documentElement.scrollTop = i*800;
}
}
for(var i=0;i<navItems.length;i++){
setNavJump(i,navItems);
}
for(var i=0;i<outlineItems.length;i++){
setNavJump(i,outlineItems);
}
//第四步：滑动门特效
var navTip=getElem('.header_nav-tip')
var setTip= function(idx,lib){
lib[idx].onmouseover=function(){
console.log(this,idx);
navTip.style.left=(idx*70)+"px";
}
var activeIdx=0;
lib[idx].onmouseout=function(){
for(var i=0;i<lib.length;i++){
if (getCls(lib[i]).indexOf('header_nav-item_active') > -1) {
activeIdx=i;
break;
}
}
navTip.style.left=(activeIdx*70)+"px";
}
}
for(var i= 0;i<navItems.length;i++){
setTip(i,navItems);
}
setTimeout(function(){
playScreenAnimateDone('.screen-1');
},200)
/* 第一屏 */
.screen-1-heading,
.screen-1-phone,
.screen-1-shadow{
transition: all 1s;
}
.screen-1-heading_animate_init,
.screen-1-shadow_animate_init{
opacity: 0;
transform: translate(0, 100%);
}
.screen-1-heading_animate_done,
.screen-1-phone_animate_done,
.screen-1-shadow_animate_done
{
opacity: 1;
transform: translate(0, 0);
}
.screen-1-phone_animate_init{
opacity: 0;
transform: translate(0, -100%);
}
/* 第二屏 */
.screen-2-heading,
.screen-2-phone,
.screen-2-sub-heading{
transition: all 1s;
}
.screen-2-heading_animate_init{
opacity: 0;
transform: translate(0, -100%);
}
.screen-2-sub-heading_animate_init{
opacity: 0;
transform: translate(0, 100%);
}
.screen-2-phone_animate_init{
opacity: 0;
transform: translate(0, 50%);
}
.screen-2-phone_animate_done,
.screen-2-sub-heading_animate_done,
.screen-2-heading_animate_done{
opacity: 1;
transform: translate(0, 0);
}
.screen-2-point_i-1{
transition: all 1s 1s;
}
.screen-2-point_i-2{
transition: all 1s 1.5s;
}
.screen-2-point_i-3{
transition: all 1s 2s;
}
.screen-2-point_i-1_animate_init{
opacity: 0;
transform: translate(-100%, 0);
}
.screen-2-point_i-2_animate_init{
opacity: 0;
transform: translate(100%, 0);
}
.screen-2-point_i-3_animate_init{
opacity: 0;
transform: translate(100%, 0);
}
.screen-2-point_i-3_animate_done,
.screen-2-point_i-2_animate_done,
.screen-2-point_animate_done{
opacity: 1;
transform: translate(0, 0);
}
/* 第三屏 */
.screen-3-features-item,
.screen-3-features,
.screen-3-heading,
.screen-3-phone,
.screen-3-sub-heading{
transition: all 1s;
}
.screen-3-heading_animate_init{
opacity: 0;
transform: translate(0, -100%);
}
.screen-3-sub-heading_animate_init{
opacity: 0;
transform: translate(0, 100%);
}
.screen-3-features_animate_init{
opacity: 0;
transform: scale(.5);
}
.screen-3-features_animate_done{
opacity: 1;
transform: scale(1);
}
.screen-3-heading_animate_done,
.screen-3-phone_animate_done,
.screen-3-sub-heading_animate_done{
opacity: 1;
transform: translate(0, 0);
}
.screen-3-phone_animate_init{
opacity: 0;
transform: translate(0, 100%);
}
.screen-3-features-item:hover{
transform: scale(1.1);
border-color: #fff;
cursor: pointer;
}
/* 第四屏 */
.screen-4-heading,
.screen-4-sub-heading{
transition: all 1s;
}
.screen-4-heading_animate_init{
opacity: 0;
transform: translate(0, -100%);
}
.screen-4-sub-heading_animate_init{
opacity: 0;
transform: translate(0, 100%);
}
.screen-4-sub-heading_animate_done,
.screen-4-heading_animate_done{
opacity: 1;
transform: translate(0, 0);
}
.screen-4-type-item_i-1{
transition: all 1s .5s;
}
.screen-4-type-item_i-2{
transition: all 1s 1s;
}
.screen-4-type-item_i-3{
transition: all 1s 1.5s;
}
.screen-4-type-item_i-4{
transition: all 1s 2s;
}
.screen-4-type-item_i-1_animate_init,
.screen-4-type-item_i-2_animate_init,
.screen-4-type-item_i-3_animate_init,
.screen-4-type-item_i-4_animate_init{
opacity: 0;
}
.screen-4-type-item_i-1_animate_done,
.screen-4-type-item_i-2_animate_done,
.screen-4-type-item_i-3_animate_done,
.screen-4-type-item_i-4_animate_done{
opacity:1;
}
/* 第五屏 */
.screen-5-heading,
.screen-5-bg,
.screen-5-sub-heading{
transition: all 1s;
}
.screen-5-heading_animate_init{
opacity: 0;
transform: translate(0, -100%);
}
.screen-5-sub-heading_animate_init{
opacity: 0;
transform: translate(0, 100%);
}
.screen-5-heading_animate_done,
.screen-5-bg_animate_done,
.screen-5-sub-heading_animate_done
{
opacity: 1;
transform: translate(0, 0);
}
.screen-5-bg_animate_init{
opacity: 0;
transform: translate(0, 100%);
}
@-webkit-keyframes bounce{
0%,100%{
transform:scale(0);
}
50%{
transform: scale(1);
}
}
.screen-2-point::before,
.screen-2-point::after{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: rgba(255, 0, 0, .3);
position: absolute;
left: 1px;
top: 1px;
-webkit-animation: bounce 1s infinite;
border-radius: 50%;
}
.screen-2-point::before{
-webkit-animation: bounce 1s infinite 1s;
}
.screen-2-point_i-1::before,
.screen-2-point_i-1::after{
content: '';
display: block;
width: 20px;
height: 20px;
background-color: rgba(255, 0, 0, .3);
position: absolute;
left: 200px;
top: 1px;
-webkit-animation: bounce 1s infinite;
border-radius: 50%;
}
/* 导航条 */
.header{
transition: all 1s;
}
.header{
position: fixed;
background-color: rgba(0, 0, 0, .5);
top: 0;
left: 0;
right: 0;
z-index: 3;
}
.header_status_black .header_logo,
.header_status_black .header_nav-item{
color: #fff;
}
/* 大纲 */
.outline{
transition: all 2s;
opacity: 0;
transform: translate(100%, 0);
}
.outline_status_in{
opacity: 1;
transform: translate(0, 0);
}
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
a{
text-decoration: none;
}
h2,h3{
font-weight: normal;
}
.total{
/* width: 1220px; */
margin: 0 auto;
overflow: hidden;
}
/* 头部 */
.header{
/* width: 1220px; */
background-color: #f7f7f7;
}
.wrap{
width: 1220px;
height: 80px;
position: relative;
margin: 0 auto;
}
.header_logo{
width: 100px;
height: 38px;
background: url('../img/logo.png') no-repeat;
background-size: 38px 38px;
padding-left: 50px;
font-size: 20px;
color: #07111b;
line-height: 38px;
position: absolute;
top: 50%;
margin-top: -19px;
left: 20px;
}
.header_nav{
position: absolute;
right: 20px;
height: 38px;
top: 50%;
margin-top: -19px;
}
.header_nav-item{
display: block;
float: left;
height: 38px;
width: 30px;
text-align: center;
color: #292f35;
font-size: 14px;
padding-left: 40px;
line-height: 38px;
text-align: center;
position: relative;
}
.header_nav-tip{
position: absolute;
width: 30px;
height: 2px;
background-color: #f00;
bottom: 0;
left: 0;
transition: all .5s;
margin-left: 40px;
}
.header_nav-item:hover{
color: #f01400;
}
.header_nav-item_active{
color: #f01400;
}
.header_nav-item_active::after{
/* content: '';
display: block;
width: 100%;
height: 2px;
background-color:#f01400;
position: absolute;
left: 0;
bottom: 0; */
}
.header_nav-item-custom-button{
color: #f4f4f5;
background-color: #07111b;
width: 90px;
border-radius: 3px;
margin-left: 40px;
padding: 0;
}
/* 第一屏 */
.screen-1{
height: 800px;
background: url('../img/bg1.png') no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
}
.screen-1-heading{
font-size: 46px;
color: #4d555d;
text-align: center;
padding: 152px;
}
.screen-1-heading span{color:#f01400;}
.screen-1-phone{
background: url('../img/screen-1-phone.png') center no-repeat;
width: 1375px;
height: 305px;
position: absolute;
left: 50%;
margin-left: -687px;
bottom: 180px;
z-index: 2;
}
.screen-1-shadow{
background: url('../img/screen-1-shadow.png') center no-repeat;
width: 1233px;
height: 411px;
position: absolute;
left: 50%;
margin-left: -616px;
bottom:30px;
z-index: 1;
opacity: .7;
}
/* 第二屏 */
.screen-2{
height: 800px;
background-color: #fafafa;
position: relative;
overflow: hidden;
}
.screen-2-heading{
font-size: 46px;
color: #f01400;
text-align: center;
padding-top:90px ;
}
.screen-2-sub-heading{
width: 520px;
height: 28px;
line-height: 28px;
font-size: 14px;
color: #07111b;
text-align: center;
padding-top: 25px;
position: absolute;
left: 50%;
margin-left: -260px;
}
.screen-2-phone{
background: url('../img/screen-2-phone.png') center no-repeat;
width: 928px;
height: 873px;
position: absolute;
left: 50%;
margin-left: -464px;
bottom: -345px;
/* z-index: 2; */
}
.screen-2-point{
width: 108px;
padding-right: 112px;
font-size: 22px;
line-height: 22px;
color: #4d555d;
background: url('../img/icon-point-right.png') no-repeat center right;
position: absolute;
}
.screen-2-point-custon-right{
background: url('../img/icon-point-left.png') no-repeat center left;
padding: 0 0 0 112px;
}
.screen-2-point_i-1{
top: 150px;
left: -164px;
}
.screen-2-point_i-2{
top: 30px;
right: 130px;
}
.screen-2-point_i-3{
top: 330px;
right: 30px;
}
/* 第三屏 */
.screen-3{
height: 800px;
background: url('../img/bg-screen-3.png') no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
}
.screen-3-wrap{
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
}
.screen-3-heading{
font-size: 46px;
color: #fff;
padding-top:90px ;
}
.screen-3-sub-heading{
height: 28px;
line-height: 28px;
font-size: 14px;
color: #fff;
padding-top: 25px;
}
.screen-3-phone{
background: url('../img/screen-3-phone.png') center top no-repeat;
width: 730px;
height: 873px;
position: absolute;
top: 200px;
right: 0;
/* z-index: 2; */
}
.screen-3-features{
position: absolute;
left: 0;
top: 398px;
width: 320px;
height: 280px;
}
.screen-3-features-item{
border: 1px solid #d07173;
width: 138px;
height: 118px;
margin:0 20px 20px 0;
float: left;
text-align: center;
color: #fff;
}
.screen-3-features-item-number{
height: 36px;
line-height: 36px;
font-size: 36px;
padding: 30px 0 7px;
}
.screen-3-features-item-desc{
height: 14px;
line-height: 14px;
font-size: 14px
}
/* 第四屏 */
.screen-4{
height: 800px;
background-color: #fff;
position: relative;
}
.screen-4-wrap{
width: 1200px;
height: 800px;
margin: 0 auto;
position: relative;
text-align: center;
}
.screen-4-heading{
font-size: 46px;
color: #f01400;
padding-top:135px ;
}
.screen-4-sub-heading{
height: 28px;
line-height: 28px;
font-size: 14px;
color: #464a4f;
padding-top: 29px;
}
.screen-4-type{
width: 1260px;
height: 270px;
position: absolute;
top: 304px;
margin-left: 55px;
}
.screen-4-type-item{
width: 220px;
height: 270px;
margin-right: 90px;
float: left;
position: relative;
text-align: center;
background-size: cover;
}
.screen-4-type-item-color{
width: 100%;
height: 14px;
line-height: 14px;
font-size: 14px;
color: #07111b;
text-align: center;
bottom: -44px;
position: absolute;
}
.screen-4-type-item-storage{
width: 100%;
position: absolute;
height: 12px;
line-height: 12px;
font-size: 12px;
color: #a4a9ae;
text-align: center;
bottom: -66px;
}
.screen-4-type-item_i-1{
background: url('../img/phone-1.png') left top no-repeat;
}
.screen-4-type-item_i-2{
background: url('../img/phone-2.png') left top no-repeat;
}
.screen-4-type-item_i-3{
background: url('../img/phone-3.png') left top no-repeat;
}
.screen-4-type-item_i-4{
background: url('../img/phone-4.png') left top no-repeat;
}
/* 第五屏 */
.screen-5{
position: relative;
overflow: hidden;
background-color: #d9dde1;
}
.screen-5-bg{
width: 100%;
height: 433px;
position: absolute;
background: url(../img/bg-screen-5.png) no-repeat center;
background-size:cover ;
bottom: -140px;
}
.screen-5-wrap{
height: 800px;
}
.screen-5-heading{
font-size: 46px;
color: #f01414;
text-align: center;
padding: 134px 0 30px 0;
}
.screen-5-sub-heading{
font-size: 14px;
color: #07111b;
text-align: center;
}
/* 第六屏 */
.screen-buy{
height: 320px;
background:#2b333b url('../img/bg-screen-buy.png') no-repeat center;
background-size: cover;
position: relative;
}
/* 立即购买 */
.screen-buy-button{
display: block;
height: 80px;
width: 240px;
background-color: #f01414;
color: #fff;
font-size: 24px;
line-height: 80px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -120px;
top: 118px;
border-radius: 3px;
transition: all .5s;
}
.screen-buy-button:hover{
box-shadow: 0 0 10px rgba(255, 255, 255, .5);
}
/* 页脚 */
.footer{
height:80px ;
font-size: 12px;
color: #fff;
line-height: 80px;
background-color: #07111b;
text-align: center;
}
.outline{
position: fixed;
padding: 5px 10px;
text-align: center;
bottom: 120px;
right: 0;
z-index: 3;
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.outline-item{
display: block;
width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
padding: 5px 0;
background-color: #fff;
margin-top: 5px;
color: #93999f;
border-top: 1px solid #eee;
}
.outline-item:first-child{
border-top: none;
}
.outline-item-status-active{
color: red;
}
var screenAnimateElements={
'.screen-1':[
'.screen-1-heading',
'.screen-1-phone',
'.screen-1-shadow',
],
'.screen-2':[
'.screen-2-heading',
'.screen-2-phone',
'.screen-2-sub-heading',
'.screen-2-point_i-1',
'.screen-2-point_i-3',
'.screen-2-point_i-2',
],
'.screen-3':[
'.screen-3-heading',
'.screen-3-phone',
'.screen-3-sub-heading',
'.screen-3-features',
],
'.screen-4':[
'.screen-4-heading',
'.screen-4-sub-heading',
'.screen-4-type-item_i-1',
'.screen-4-type-item_i-2',
'.screen-4-type-item_i-3',
'.screen-4-type-item_i-4',
],
'.screen-5':[
'.screen-5-heading',
'.screen-5-bg',
'.screen-5-sub-heading',
]
}
function setScreenAnimate(screenCls){
var screen=document.querySelector(screenCls); //获取当前屏的元素
var animateElements=screenAnimateElements[screenCls]; //需要设置动画的元素
var isSetAnimateClass = false; //是否有初始化子元素的样式
var isElementDone=false;//当前屏幕下所有的子元素的状态是Done？
screen.onclick=function(){
//初始化样式，增加init
if (isSetAnimateClass===false) {
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');
}
isSetAnimateClass=true;
return;
}
//切换所有的 animateElements 的 init -> done
if (isElementDone===false) {
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
}
isElementDone=true;
return;
}
//切换所有的 animateElements 的 done -> init
if (isElementDone===true) {
for(var i=0;i<animateElements.length;i++){
var element=document.querySelector(animateElements[i]);
var baseCls=element.getAttribute('class');
element.setAttribute('class',baseCls.replace('_animate_done','_animate_init'));
}
isElementDone=false;
return;
}
}
}
for(k in screenAnimateElements){
setScreenAnimate(k);
}
正在回答
同学你好，滚动到顶部手，scrollTop值为0， 单独调用一下switchNavItemActive方法即可，示例：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星