无法调用done

无法调用done

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/base.css">
<link rel="stylesheet" type="text/css" href="./css/animate.css">
</head>
<body>
<header class="header">
<div class="header__wrap">
<div class="header__logo">慕课网</div>
<div class="header__nav">
<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">说明</a>
<a href="javascript:;" class="header__nav-item header__nav-item_button">立即购买</a>
</div>
</div>
</header>
<!-- 第一屏 -->
<div class="screen-1">
<h2 class="screen-1__text"><span>慕课手机</span> 让你的生活更精彩</h2>
<div class="screen-1__phone"></div>
<div class="screen-1__shadow"></div>
</div>
<!-- 第二屏 -->
<div class="screen-2">
<h2 class="screen-2__text">优美的设计，更令人着迷</h2>
<h3 class="screen-2__text-small">采用受欢迎的设计，让它更加出色。<br/>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
</h3>
<div class="screen-2__phone">
<div class="screen-2__phone_point screen-2__phone_point_i_1">高清摄像</div>
<div class="screen-2__phone_point screen-2__phone_point-right screen-2__phone_point_i_2">超薄机身</div>
<div class="screen-2__phone_point screen-2__phone_point-right screen-2__phone_point_i_3">大屏显示</div>
</div>
</div>
<!-- 第三屏 -->
<div class="screen-3">
<div class="screen-3__wrap">
<h2 class="screen-3__text">外形小巧，功能强大的手机</h2>
<h3 class="screen-3__text-small">采用受欢迎的设计，让它更加出色。<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__text">丰富的手机型号</h2>
<h3 class="screen-4__text-small">找到适合你的手机</h3>
<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>
<!-- 第五屏 -->
<div class="screen-5">
<h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>
   <h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>
<div class="screen-5__bg"></div>
</div>
<!-- 第六屏 -->
<div class="screen-buy">
  <a class="screen-buy__button" href="javascript:;">立即购买</a>
</div>
<!-- footer -->
<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>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript" 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');
	//  getAttribute()获取class元素
}
//  设置元素样式
var setCls = function(element){
	return element.setAttribute('class',cls);
	//  setAttribute()，为class这个元素，添加cls
}

//  为元素添加样式
var addCls = function( element ,cls){  // cls 表示新加的样式
	var baseCls = getCls(element);
	if( baseCls.indexOf(cls) === -1){  //  -1，没有找到表示没有添加新的cls
		setCls(element,baseCls+' '+cls) //  原来元素+空格+新cls
	}
}
//  为元素删除样式
var delCls = function(element ,cls){  //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__text',
		'.screen-1__phone',
		'.screen-1__shadow',
	],
	'.screen-2':[
		'.screen-2__text',
		'.screen-2__phone',
		'.screen-2__text-small',
		'.screen-2__phone_point_i_1',
		'.screen-2__phone_point_i_2',
		'.screen-2__phone_point_i_3',
	],
	'.screen-3':[
		'.screen-3__text',
		'.screen-3__phone',
		'.screen-3__text-small',
		'.screen-3__features',
	],
	'.screen-4':[
		'.screen-4__text',
		'.screen-4__text-small',
		'.screen-4__type',
		'.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__subheading',
		'.screen-5__bg',
	],
};

//  设置屏内元素为初始状态
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);
	}
}
//  第二部：滚动到哪里，就播放到哪里
window.onscroll = function(){
	var top = document.body.scrollTop;
	if(top > 10){
		/*playScreenAnimateDone(".screen-1");*/
	console.log(top);
	}
}
/*
BEM 设计模式

模块（没有前缀，多个单词用 - 链接）
元素（元素在模块后面，可以有多个层级，用 __ 链接）
修饰（某元素、或某模块特别的状态，必须有一个状态名和状态值，使用 _ 链接）

 */

/* 头部制作 */
.header{
	background-color: #f7f7f7;
}

.header__wrap{
	position: relative;
	width: 1200px;
	height: 80px;
	margin: 0 auto;
}

.header__logo{
	position: absolute;
	width: 132px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	color: #07111b;
	background: url('../img/logo.png') top left no-repeat;
	text-indent: 52px;
	top: 50%;
	margin-top: -20px;
	left: 20px;
}

.header__nav{
	position: absolute;
	height: 40px;
	right: 20px;
	top: 50%;
	margin-top: -20px;
}

.header__nav-item{
	position: relative;
	color: #07111b;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	margin-left: 40px;
	float: left;
	display: block;
	text-align: center;
}

.header__nav-item:hover{
	color: #f01400;
}

.header__nav-item_active{
	color: #f01400;
}

.header__nav-item_active::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #f01400 ;
}

.header__nav-item_button{
	width: 90px;
	background-color: #07111b;
	border-radius: 3px;
	color: #fff;
	transition: all .5s;
}

/* 第一屏 */
.screen-1{
	position: relative;
	height: 800px;
	background: url('../img/bg-screen-1.png') center no-repeat;
	background-size: cover;
}

.screen-1__text{
	margin: 0;
	padding: 0;
	color: #4d555d;
	font-weight: normal;
	font-size: 48px;
	text-align: center;
	padding-top: 140px;
}

.screen-1__text span{
	color: #f01414;
}
.screen-1__phone{
	position: absolute;
	left: 50%;
	margin-left: -687px;
	bottom: 180px;
	width: 1375px;
	height: 305px;
	background: url('../img/screen-1-phone.png') center no-repeat;
	z-index: 2;
}

.screen-1__shadow{
	width: 1233px;
	height: 411px;
	background: url('../img/screen-1-shadow.png') center no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -616px;
	bottom: 30px;
	z-index: 1;
	opacity:0.5;   /* 透明度 */
	filter:Alpha(opacity=50);  /* IE8透明度 */
}

/* 第二屏 */
.screen-2{
	position: relative;
	height: 800px;
	background-color: #fafafa;
	overflow: hidden;
}

.screen-2__text{
	color: #f01414;
	font-size: 48px;
	text-align: center;
	padding-top: 80px;
}

.screen-2__text-small{
	color: #07111b;
	font-size: 16px;
	line-height: 28px;
	padding-top: 25px;
	text-align: center;
}

.screen-2__phone{
	position: absolute;
	width: 928px;
	height: 873px;
	background: url('../img/screen-2-phone.png') no-repeat center;
	left: 50%;
	margin-left: -464px;
	bottom: -341px;
}

.screen-2__phone_point{
	position: absolute;
	width: 207px;
	height: 24px;
	font-size: 24px;
	line-height: 24px;
	color: #4d555d;
	background: url('../img/icon-point-right.png') center right no-repeat;
}
.screen-2__phone_point-right{
	text-align: right;
	background: url('../img/icon-point-left.png') center left no-repeat;
}

.screen-2__phone_point_i_1{
	top: 150px;
	right: 870px;
}

.screen-2__phone_point_i_2{
	top: 30px;
	right: 150px;
}
.screen-2__phone_point_i_3{
	top: 336px;
	right: 45px;
}

/* 第三屏 */
.screen-3{
	position: relative;
	height: 800px;
	background: url('../img/bg-screen-3.png') center no-repeat;
	background-size: cover;
	overflow: hidden;
}

.screen-3__wrap{
	position: relative;
	width: 1200px;
	height: 800px;
	margin: 0 auto;
}

.screen-3__text{
	color: #fff;
	font-size: 48px;
	padding-top: 80px;
}

.screen-3__text-small{
	color: #fff;
	font-size: 16px;
	line-height: 28px;
	padding-top: 35px;
}

.screen-3__phone{
	position: absolute;
	width: 729px;
	height: 900px;
	background: url('../img/screen-3-phone.png') top no-repeat;
	right: 0;
	bottom: -315px;
}

.screen-3__features{
	position: absolute;
	top: 395px;
	left: 0;
	width: 320px;
	height: 280px;
}
.screen-3__features__item{
	width: 138px;
	height: 118px;
	text-align: center;
	color: #fff;
	border: 1px solid #cb7173;
	border-radius: 3px;
	float: left;
	margin: 0 20px 20px 0;
}

.screen-3__features__item__number{
	height: 36px;
	font-size: 48px;
	line-height: 48px;
	padding-top: 18px;
}

.screen-3__features__item__desc{
	height: 14px;
	font-size: 14px;
	line-height: 14px;
	padding: 18px 0 8px;
}

/* 第四屏 */
.screen-4{
	height: 800px;
	overflow: hidden;
}

.screen-4__wrap{
	position: relative;
	width: 1200px;
	height: 800px;
	margin: 0 auto;
}

.screen-4__text{
	color: #f01414;
	font-size: 48px;
	padding-top: 137px;
	text-align: center;
}

.screen-4__text-small{
	color: #07111b;
	text-align: center;
	font-size: 16px;
	line-height: 28px;
	padding-top: 20px;
}

.screen-4__type{
	width: 1145px;
	height: 266px;
	padding-top: 70px;
	margin: 0 auto;
}

.screen-4__type-item{
	position: relative;
	width: 240px;
	height: 270px;
	float: left;
	margin-right: 60px
}

.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-4__type-item:last-child{
	margin-right: 0;
}

.screen-4__type-item_color{
	position: absolute;
	top: 300px;
	left: 0;
	width: 100%;
	font-size: 16px;
	color: #07111b;
	text-align: center;
}

.screen-4__type-item_storage{
	position: absolute;
	top: 328px;
	left: 0;
	width: 100%;
	font-size: 12px;
	color: #93999f;
	text-align: center;
}


/* 第五屏 */
.screen-5{
	position: relative;
	height: 800px;
	background-color: #d9dde1;
	overflow: hidden;
}

.screen-5__bg{
	position: absolute;
	width: 1920px;
	height: 800px;
	background: url('../img/bg-screen-5.png') center bottom no-repeat;
	left: 50%;
	margin-left: -960px;
	bottom: -140px;
}

.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;
}

/* 第六屏 */
.screen-buy{
	height: 80px;
	padding: 120px 0;
	position: relative;
	overflow: hidden;
	background: #2b333b url('../img/bg-screen-buy.png') center no-repeat;
	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 .5s;
}
.screen-buy__button:hover{
	-moz-transform: scale(1.1,1.1);
   -webkit-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
}

/* footer */
.footer{
	height: 80px;
	background-color: #07111b;
	text-align: center;
	color: #fff;
	line-height: 80px;
}

.outline{
	position: fixed;
	background-color: #fff;
	padding: 5px 10px;
	bottom: 120px;
	right: 0;
	z-index: 3px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5)
}
.outline__item{
	display: block;
	width: 40px;
	height: 30px;
	line-height: 30px;
	padding: 5px 0;
	background-color: #fff;
	margin-top: 5px;
	border-top: 1px solid #eee;
	color: #93999f;
	text-align: center;
}
.outline__item:first-child{
	border: none;
}
.outline__item_status_active{
	color: red;
}

代码贴上来了，跟着老师的做的呀，js调用_animate_done的时候就是没放映
笑弯了腰 2019-04-20
源自：宣传页项目   5-3 JS实现交互动画(导航条)
3
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
樱桃小胖子 回答被采纳获得+3积分 2019-04-21 10:40:29

这个是DTD的问题，即<!DOCTYPE html>的问题，去掉<!DOCTYPE html>的话使用document.body.scrollTop就没有问题了，但是要符合web标，DTD是不能少的，因此，在使用DTD时用document.documentElement.scrollTop代替document.body.scrollTop

希望可以帮到你！

0
收起回答
  • 笑弯了腰 提问者 #1
    那就是document.body.scrollTop这个都不能用了是吗？
    2019-04-21 14:10:22
  • 樱桃小胖子 回复 提问者 笑弯了腰 #2
    可以用，比如写成兼容模式，var heightTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(heightTop);浏览器能识别哪个就用哪个就好了
    2019-04-21 14:14:16
提问者 笑弯了腰 2019-04-20 23:27:39 
var top = document.body.scrollTop;
我换成
var top = document.documentElement.scrollTop;

这个好像又可以，不是说谷歌浏览器只认识document.body.scrollTop;吗，我用这个反而效果不行

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于子类和父类有无参数构造方法的调用问题
31 0 4
动画元素状态无法从init切换到done
14 0 3
子类的无参构造调用
11 0 5
那我怎么知道this（）是调用那个的构造方法？
8 4 8
什么叫调用父类的构造方法
96 0 6

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师