我滑动门的线怎么没了？也没报错

首页课程实战体系课手记专栏慕课教程

我滑动门的线怎么没了？也没报错

来源：5-5 JS实现滑动门效果

慕后端5428016

2019-10-31 16:43:34

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</nav>

</div>

</header>

<h2 class="screen-1__heading"><b>慕课手机</b> 让你的生活更精彩</h2>

</div>

<h2 class="screen-2__heading">优美的设计，更令人着迷</h2>

<h3 class="screen-2__subheading">采用受欢迎的设计，让它更出色。<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>

</div>

<h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>

<h3 class="screen-3__subheading">采用受欢迎的设计，让它更出色。<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>

</div>

</div>

<div class="screen-3__features__item__desc">touch</div>

</div>

</div>

<h2 class="screen-4__heading">丰富的手机型号</h2>

<h3 class="screen-4__subheading">找到适合你的手机</h3>

</div>

</div>

</div>

</div>

<h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>

<h2 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能、让您生活更丰富精彩。</h2>

</div>

</div>

</footer>

</div>

</body>

</html>

BEM设计模式

模块（没有前缀，多个单词用-链接）

元素（元素在模块之后，可以有多个层级，以__链接）

修饰(某元素、或某个模块特别的状态，必须有一个状态名和状态值，使用_连接)

.header{

background-color: #f7f7f7;

}

.header__wrap{

width: 1200px;

height:80px;

position: relative;

margin: 0 auto;

}

.header__logo{

width: 150px;

height: 38px;

line-height: 38px;

font-size: 20px;

color: #07111b;

text-indent: 50px;

background: url('../img/logo.png') left center no-repeat;

background-size: 38px 38px;

position: absolute;

top: 50%;

margin-top: -19px;

left: 20px;

}

.header__nav{

position: absolute;

height: 38px;

top: 50%;

margin-top: -19px;

right: 20px;

}

.header__nav-item{

color: #292f35;

font-size: 14px;

display: block;

height: 38px;

width: 30px;

line-height: 38px;

float: left;

padding-left: 40px;

position: relative;

text-align: center;

}

.header__nav-item:hover{

color: #f01400;

}

.header__nav-item_status_active{

color: #f01400;

}

.header__nav-item_status_active::after{

/* content: ' ';

display: block;

width: 100%;

height: 2px;

position: absolute;

background-color:#f01400;

left: 0;

bottom: 0;*/

}

.header__nav-item_custom_button{

background-color: #000;

color: #f4f4f5;

width: 90px;

text-align: center;

border-radius: 3px;

padding: 0;

margin-left: 40px;

}

/*第一屏*/

.screen-1{

height: 800px;

background:url(../img/bg-screen-1.png) no-repeat center;

position:relative;

overflow: hidden;

background-size: cover;

}

.screen-1__heading{

margin: 0;

padding: 0;

font-size: 46px;

color: #4d555d;

text-align: center;

font-weight: normal;

padding-top: 152px;

}

.screen-1__heading b{

color: #f01400;

font-weight: normal;

}

.screen-1__phone{

width: 1375px;

height: 305px;

background: url(../img/screen-1-phone.png) no-repeat center;

position: absolute;

left: 50%;

margin-left: -687px;

bottom: 180px;

z-index: 2;

}

.screen-1__shadow{

width: 1233px;

height: 411px;

background: url(../img/screen-1-shadow.png) no-repeat center;

position: absolute;

left: 50%;

margin-left: -616px;

bottom: 30px;

z-index: 0;

opacity: .8;

}

/*第二屏*/

.screen-2{

background-color: #fafafa;

height: 800px;

position: relative;

overflow: hidden;

}

.screen-2__heading{

font-size: 46px;

line-height: 46px;

color: #f01400;

text-align: center;

font-weight: normal;

padding-top: 96px;

}

.screen-2__subheading{

font-size: 14px;

color: #2c3137;

text-align: center;

font-weight: normal;

padding-top: 25px;

line-height: 28px;

}

.screen-2__phone{

width: 928px;

height: 873px;

background: url(../img/screen-2-phone.png) no-repeat center;

position: absolute;

left: 50%;

margin-left: -464px;

bottom: -345px;

z-index: 2;

}

.screen-2__point{

width: 108px;

height: 22px;

padding-right: 122px;

font-size: 22px;

line-height: 22px;

color: #4d555d;

position: absolute;

background: url(../img/icon-point-right.png) no-repeat center right;

}

.screen-2__point_custom_right{

padding: 0 0 0 112px;

background:url(../img/icon-point-left.png)no-repeat center left;

}

.screen-2__point_i-1{

top: 150px;

left: -164px;

}

.screen-2__point_i-2{

right: 130px;

top: 30px;

}

.screen-2__point_i-3{

right: 30px;

top: 330px;

}

/*第三屏*/

.screen-3{

background:url(../img/bg-screen-3.png) no-repeat center;

background-size: cover;

height: 800px;

position: relative;

overflow: hidden;

}

.screen-3__wrap{

width: 1200px;

height: auto;

margin: 0 auto;

position: relative;

}

.screen-3__heading{

font-size: 46px;

line-height: 46px;

color: #ffffff;

text-align: left;

font-weight: normal;

padding-top: 94px;

}

.screen-3__subheading{

font-size: 14px;

color: #ffffff;

text-align: left;

padding-top: 25px;

line-height: 28px;

}

.screen-3__phone{

width: 750px;

height: 873px;

background: url(../img/screen-3-phone.png) no-repeat center top;

position: absolute;

right: 0;

margin-left: -464px;

top: 195px;

z-index: 2;

}

.screen-3__features{

position: absolute;

top: 395px;

left: 0;

width: 320px;

height: 280px;

}

.screen-3__features__item{

width: 138px;

height: 118px;

border: 1px solid #cb7173;

margin: 0 20px 20px 0;

float: left;

border-radius: 3px;

color: #fff;

text-align: center;

}

.screen-3__features__item__number{

height: 36px;

font-size: 36px;

line-height: 36px;

padding: 18px 0 8px;

}

.screen-3__features__item__desc{

height: 14px;

font-size: 14px;

line-height: 14px;

}

.screen-4{

background-color: #ffffff;

height: 800px;

position: relative;

overflow: hidden;

}

.screen-4__wrap{

width: 1200px;

height: auto;

margin: 0 auto;

position: relative;

}

.screen-4__heading{

font-size: 46px;

line-height: 46px;

color: #f01400;

text-align: center;

padding-top: 135px;

}

.screen-4__subheading{

font-size: 14px;

color: #464a4f;

text-align: center;

padding-top: 29px;

line-height: 28px;

}

.screen-4__type{

width: 1260px;

height: 270px;

position: absolute;

top: 304px;

margin-left: 30px;

}

.screen-4__type__item{

width: 220px;

margin-right: 90px;

height: 270px;

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: #2c3238;

position: absolute;

bottom: -44px;

}

.screen-4__type__item__storage{

width: 100%;

height: 12px;

line-height: 12px;

font-size: 12px;

color: #a4a9ae;

position: absolute;

bottom: -66px;

}

.screen-4__type__item_i_1{

background: url(../img/phone-1.png) no-repeat left top;

}

.screen-4__type__item_i_2{

background: url(../img/phone-2.png) no-repeat left top;

}

.screen-4__type__item_i_3{

background: url(../img/phone-3.png) no-repeat left top;

}

.screen-4__type__item_i_4{

background: url(../img/phone-4.png) no-repeat left top;

}

/*第五屏*/

.screen-5{

background-color: #ffffff;

height: 800px;

position: relative;

overflow: hidden;

}

.screen-buy{

background: #2b333b url(../img/bg-screen-buy.png) no-repeat center;

height: 80px;

padding:120px 0;

position: relative;

overflow: hidden;

text-align: center;

}

.screen-buy__button{

height: 80px;

width: 240px;

text-align: center;

line-height: 80px;

font-size: 24px;

color: #fff;

background-color:#f01414;

display: inline-block;

border-radius: 3px;

transition: all 0.5s;

}

.screen-buy__button:hover{

box-shadow: 0 0 10px #fff;

}

.screen-5{

height: 800px;

position:relative;

overflow: hidden;

background-color:#d9dde1

}

.screen-5__bg{

height: 433px;

width: 1920px;

background:url(../img/bg-screen-5.png) no-repeat center bottom;

background-size: contain;

position: absolute;

left: 50%;

margin-left: -960px;

bottom: -100px;

}

.screen-5__heading{

font-size: 46px;

line-height: 46px;

color: #f01400;

text-align: center;

padding-top: 130px;

}

.screen-5__subheading{

font-size: 14px;

color: #2c3137;

text-align: center;

padding-top: 25px;

line-height: 28px;

}

.footer{

height: 80px;

background-color: #07111b;

font-size: 12px;

color: #fff;

line-height: 80px;

text-align: center;

}

.outline{

position: fixed;

padding: 5px 10px;

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;

border-top: 1px solid #eee;

color: #93999f;

}

.outline__item:first-child{

border: none;

}

.outline__item_status_active{

color: red;

}

.header__nav-tip{

position: absolute;

width: 30px;

height: 2px;

background-color: #f000;

bottom: 0;

left: 0;

transition: all .5s;

margin-left: 40px;

}

//获取元素

var getElement = function(selector){

return document.querySelector(selector);

}

var getAllElement = 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__subheading',

'.screen-2__point_i-1',

'.screen-2__point_i-2',

'.screen-2__point_i-3',

'.screen-3':[

'.screen-3__heading',

'.screen-3__phone',

'.screen-3__subheading',

'.screen-3__features',

'.screen-4':[

'.screen-4__heading',

'.screen-4__subheading',

'.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__subheading',

]

};

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){

setScreenAnimateInit(k);

}

//第二步：滚动到哪就播放到哪

var navItems = getAllElement('.header__nav-item');

var outLineItem = getAllElement('.outline__item');

var switchNavItemsActive = function(idx){

for(var i=0;i<navItems.length;i++){

delCls(navItems[i],'header__nav-item_status_active');

}

addCls(navItems[idx],'header__nav-item_status_active')

}

switchNavItemsActive(0)

window.onscroll = function(){

var top = document.documentElement.scrollTop || document.body.scrollTop

if (top > 80) {

addCls(getElement('.header'),'header_status_back');

addCls(getElement('.outline'),'outline_status_in');

}else{

delCls(getElement('.header'),'header_status_back');

delCls(getElement('.outline'),'outline_status_in');

switchNavItemsActive(0)

}

if (top > 1) {

playScreenAnimateDone('.screen-1')

}

if (top > 800*1-100) {

playScreenAnimateDone('.screen-2')

switchNavItemsActive(1)

}

if (top > 800*2-100) {

playScreenAnimateDone('.screen-3')

switchNavItemsActive(2)

}

if (top > 800*3-100) {

playScreenAnimateDone('.screen-4')

switchNavItemsActive(3)

}

if (top > 800*4-100) {

playScreenAnimateDone('.screen-5')

switchNavItemsActive(4)

}

//双向定位

var setNavJump = function(i,lib){

var item = lib[i];

item.onclick=function(){

document.body.scrollTop=i * 800;

document.documentElement.scrollTop=800 * i;

}

for(var i=0;i<navItems.length;i++){

setNavJump(i,navItems);

}

for(var i=0;i<outLineItem.length;i++){

setNavJump(i,outLineItem);

}

//滑动门

var navTip = getElement('.header__nav-tip');

var setTip = function(idx,lib){

lib[idx].onmouseover=function(){

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_status_active')>-1){

activeIdx=i;

break;

}

navTip.style.left=(activeIdx*70)+'px';

}

for(var i=0;i<navItems.length;i++){

setTip(i,navItems);

}

.screen-1__phone,

.screen-1__heading,

.screen-1__shadow{

transition: all 1s;

}

.screen-1__heading_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-1__shadow_animate_init{

opacity: 0;

transform: translate(0,100%);

}

/*第二屏*/

.screen-2__phone,

.screen-2__subheading,

.screen-2__heading{

transition: all 1s;

}

.screen-2__subheading_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-2__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-2__phone_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-2__phone_animate_done,

.screen-2__subheading_animate_done,

.screen-2__heading_animate_done{

opacity: 1;

transform: translate(0,0);

}

.screen-2__point{

transition: all 1s 1s;

}

.screen-2__point_i-1_animate_init{

opacity: 0;

transform: translate(-100%,0);

}

.screen-2__point_i-3_animate_init,

.screen-2__point_i-2_animate_init{

opacity: 0;

transform: translate(-100%,0);

}

.screen-2__point_done{

opacity: 1;

transform: translate(0,0);

}

/*第三屏*/

.screen-3__phone,

.screen-3__subheading,

.screen-3__features,

.screen-3__heading{

transition: all 1s;

}

.screen-3__phone_animate_done,

.screen-3_subheading_animate_done,

.screen-3__heading_animate_done{

opacity: 1;

transform: translate(0,0);

}

.screen-3__features_animate_done{

transform: scale(1);

opacity: 1;

}

.screen-3__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-3__phone_animate_init,

.screen-3__subheading_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-3__features_animate_init{

transform: scale(.5);

opacity: 0;

}

.screen-3__features__item{

transition: all .5s;

cursor: pointer;

}

.screen-3__features__item:hover{

transform: scale(1.1);

border-color: #fff;

}

/*第四屏*/

.screen-4__subheading,

.screen-4__heading{

transition: all 1s;

}

.screen-4__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-4__subheading_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-4_subheading_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__bg,

.screen-5__subheading,

.screen-5__heading{

transition: all 1s;

}

.screen-5__bg_animate_done,

.screen-5_subheading_animate_done,

.screen-5__heading_animate_done{

opacity: 1;

transform: translate(0,0);

}

.screen-5__heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-5__bg_animate_init,

.screen-5__subheading_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;

border-radius: 50%;

position: absolute;

top: 0;

left: 0;

background-color: rgba(255,0,0,.4);

-webkit-animation:bounce 2s infinite ;

}

.screen-2__point:before{

-webkit-animation:bounce 2s infinite 1s;

}

.screen-2__point_i-1:before,

.screen-2__point_i-1:after{

left: 210px;

}

/*导航条 _status_back 样式*/

.header{

transition: all 1s;

}

.header_status_back{

background-color: rgba(0,0,0,.5);

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 3;

}

.header_status_back .header__logo,

.header_status_back .header__nav-item{

color: #fff;

}

.header_status_back .header__nav-item_status_active{

color: red;

}

/*大纲 _status_in 样式*/

.outline{

transition: all 1s;

transform: translate(100%,0);

}

.outline_status_in{

opacity: 1;

transform: translate(0,0);

}

body{

padding: 0;

margin: 0;

background-color: #fff;

font-size: 12px;

font-family: "微软雅黑";

}

text-decoration: none;

}

h2,h3{

margin: 0;

padding: 0;

font-weight: normal;

}

写回答

1回答

好帮手慕星星

2019-10-31

同学你好，

是滑动门颜色没有设置对，如下修改：

要细心哦，自己再测试下，祝学习愉快！

欢迎采纳~

0 学习 · 40143 问题

查看课程

相似问题

滑动门特效如果文字宽度不一样如何自适应宽度？

回答 1

滑动门用事件委托怎么写

回答 3

mouseout监听滑动门会失效

回答 2

老师，为什么突然不能实现了呢

回答 3

滚动时滑动门效果无法实现

回答 1

打开慕课网App查看更多内容