html
<!DOCTYPE html>
<html>
<head>
<title>H5实战页面</title>
<!-- 引入初始化css样式表 -->
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<!-- 引入css样式表 -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 引入配合js动画的css样式表 -->
<link rel="stylesheet" type="text/css" href="./css/animation.css">
</head>
<body>
<header class="header">
<div class="header__logo">H5实战页面</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 class="header__nav-tip"></div>
</div>
</header>
<!-- screen-1 -->
<section class="screen-1">
<div class="screen-1__wrap">
<h1 class="screen-1__heading screen-1__heading_animate_init">实战课程重磅上线</h1>
<h3 class="screen-1__subheading screen-1__subheading_animate_init">一键云学习，还在等待什么？</h3>
</div>
</section>
<!-- screen-2 -->
<section class="screen-2">
<div class="screen-2__wrap">
<h1 class="screen-2__heading">每门课都是真实的商业案例</h1>
<h3 class="screen-2__subheading">
真实案例，真实场景，在实践中时间，操作，调试，<br >
大牛带你体验BAT真实的开发流程，所有开发过程---为你呈现
</h3>
<div class="screen-2__pic">
<div class="screen-2__pic-i-1">
</div>
<div class="screen-2__pic-i-2">
</div>
</div>
</div>
</section>
<!-- screen-3 -->
<section class="screen-3">
<div class="screen-3__wrap">
<div class="screen-3__pic"></div>
<h1 class="screen-3__heading">强大的语言课程体系支持</h1>
<h3 class="screen-3__subheading">
学习环境与课程轻松对接，安装，调试，写入，部署，运行，一站式解决<br >
，让你体验开发全流程。
</h3>
<ul class="screen-3__type">
<li class="screen-3__type-item">HTMl5</li>
<li class="screen-3__type-item">PHP</li>
<li class="screen-3__type-item">JAVA</li>
<li class="screen-3__type-item">Python</li>
<li class="screen-3__type-item">Node.js</li>
</ul>
</div>
</section>
<!-- screen-4 -->
<section class="screen-4">
<div class="screen-4__wrap">
<h1 class="screen-4__heading"> 省去复杂的环境搭建</h1>
<h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3>
<ul class="screen-4__type">
<li class="screen-4__type-item screen-4__type-item-i-1">
<span class="screen-4__type-item-text">
实战课程集成开发环境
</span>
</li>
<li class="screen-4__type-item screen-4__type-item-i-2">
<span class="screen-4__type-item-text">
内置终端命令行
</span>
</li>
<li class="screen-4__type-item screen-4__type-item-i-3">
<span class="screen-4__type-item-text">
编译你的应用程序
</span>
</li>
<li class="screen-4__type-item screen-4__type-item-i-4">
<span class="screen-4__type-item-text">
通过云端服务器输出效果
</span>
</li>
</ul>
</div>
</section>
<!-- screen-5 -->
<section class="screen-5">
<div class="screen-5__wrap">
<div class="screen-5__pic"></div>
<h1 class="screen-5__heading">
云端学习可以这样简单
</h1>
<h3 class="screen-5__subheading">
看视频，敲代码，一气呵成，结合慕课网为你提供的云端学习工具
，所见即所得，从此学习不一样。
</h3>
</div>
</section>
<!-- submit-area -->
<section class="submit-area">
<div class="submit-area__wrap">
<a href="javascript:;" class="submit-area-button">继续学习了解体验</a>
</div>
</section>
<!-- footer -->
<footer class="footer">
<div class="footer__wrap">
<nav class="footer__type">
<a href="javascript:;" class="footer__type-item">网站首页</a>
<a href="javascript:;" class="footer__type-item">人才招聘</a>
<a href="javascript:;" class="footer__type-item">联系我们</a>
<a href="javascript:;" class="footer__type-item">高校联盟</a>
<a href="javascript:;" class="footer__type-item">关于我们</a>
<a href="javascript:;" class="footer__type-item">讲师招募</a>
<a href="javascript:;" class="footer__type-item">意见反馈</a>
<a href="javascript:;" class="footer__type-item">友情链接</a>
</nav>
<div class="footer__copy">Copyright 2015 imoooc.com All Right Reserved | 京 ICP备 13046642号-2
</div>
</div>
</footer>
<!-- outline -->
<div class="outline">
<a href="javascript:;" class="outline__item outline__item_i_1">时</a>
<a href="javascript:;" class="outline__item outline__item_i_2">课</a>
<a href="javascript:;" class="outline__item outline__item_i_3">强</a>
<a href="javascript:;" class="outline__item outline__item_i_4">省</a>
<a href="javascript:;" class="outline__item outline__item_i_5">云</a>
</div>
<!-- 引入js文件 -->
<script type="text/javascript" src="./js/script.js"></script>
</body>
</html>
style.css
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
form,
tr,
td,
span,
i,
em,
strong,
p,
a {margin: 0;padding: 0;font-family: "Microsoft YaHei";font-size: 14px;}
a {text-decoration: none;}
img {border: 0;vertical-align: bottom;}
ul,
li,
ol {list-style: none;}
.clearfix:before,
.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.w-1200 {width: 1200px;margin: 0 auto;position: relative;}
/*
BEM 设计模式
模块（没有前缀，多个单词用- 链接）
元素（元素在模块之后，可以有多个层级，以__链接）
修饰（某元素，或者某模块特别的状态，必须有一个状态名和状态值，使用_链接）
*/
.header {position: fixed;top: 0;left: 0;width: 100%;height: 80px;line-height: 80px;background: rgba(255, 255, 255, .8);z-index: 3;min-width: 1200px;}
.header__logo {position: absolute;top: 50%;left: 0;margin-top: -20px;margin-left: 10px;height: 40px;line-height: 40px;width: 90px;padding-left: 60px;color: #666;background: url("../images/logo.png") no-repeat left center;cursor: pointer;transition: all .3s ease;-webkit-transition: all .3s ease;-ms-transition: all .3s ease;-moz-transition: all .3s ease;}
.header__logo:hover {color: #333}
.header__nav {position: absolute;top: 50%;right: 0;margin-top: -20px;height: 40px;line-height: 40px;}
.header__nav-item {height: 40px;line-height: 40px;text-align: center;float: left;font-size: 14px;color: #666;padding-left: 32px;}
.header__nav-item:hover {color: #333;}
.header__nav-item:first-child {padding-left: 0;}
.header__nav-item:last-child {}
.header__nav-item-button {padding-left: 0;margin-left: 32px;margin-right: 32px;border-radius: 5px;width: 90px;height: 40px;line-height: 40px;text-align: center;background: #e53e3e;color: #fff;}
.header__nav-item-button:hover {background: #f00;color: #fff;}
/* .screen-1 */
.w-1200 {width: 1200px;margin: 0 auto;position: relative;}
.screen-1 {height: 640px;background: url("../images/sc1.jpg") no-repeat;background-size: cover;text-align: center;}
.screen-1__wrap {width: 1200px;margin: 0 auto;position: relative;height: 640px;}
.screen-1__heading {position: absolute;top: 233px;width: 100%;height: 36px;line-height: 36px;font-size: 36px;color: #fff;}
.screen-1__subheading {position: absolute;top: 312px;height: 18px;width: 100%;line-height: 18px;font-size: 18px;color: #fff;font-weight: 100;}
/* screen-2 */
.screen-2 {height: 640px;text-align: center;}
.screen-2__wrap {width: 1200px;height: 640px;margin: 0 auto;position: relative;overflow: hidden;}
.screen-2__heading {position: absolute;top: 88px;width: 100%;font-size: 36px;color: #333;}
.screen-2__heading:after {content: ' ';display: block;width: 50px;height: 2px;background: #f00;position: absolute;bottom: -30px;left: 50%;margin-left: -25px;}
.screen-2__subheading {position: absolute;top: 192px;width: 100%;font-size: 18px;line-height: 25px;font-weight: 100;color: #000;}
.screen-2__pic {position: absolute;top: 280px;left: 50%;margin-left: -375px;width: 750px;height: 360px;background: url("../images/sc2.png") no-repeat left top;}
.screen-2__pic-i-1 {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url("../images/sc2-1.png") no-repeat center top;}
.screen-2__pic-i-2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url("../images/sc2-2.png") no-repeat 355px 56px;}
/* screen-3 */
.screen-3 {height: 640px;background: #2b333b;}
.screen-3__wrap {width: 1400px;height: 640px;margin: 0 auto;position: relative;}
.screen-3__pic {position: absolute;top: 100px;left: 20px;width: 370px;height: 400px;background: url("../images/sc3.png") no-repeat left top;background-size: 100% 100%;}
.screen-3__heading {position: absolute;top: 226px;left: 880px;font-size: 36px;color: #fff;}
.screen-3__heading:after {content: ' ';display: block;width: 50px;height: 2px;background: #f00;position: absolute;left: 0;bottom: -30px;}
.screen-3__subheading {position: absolute;top: 320px;left: 880px;font-size: 16px;line-height: 25px;font-weight: 100;color: #fff;}
.screen-3__type {position: absolute;left: 880px;bottom: 50px;}
.screen-3__type-item {box-sizing: border-box;width: 60px;height: 60px;line-height: 60px;text-align: center;border-radius: 50%;border: 2px solid #fff;display: inline-block;margin-left: 40px;font-size: 14px;}
.screen-3__type-item:nth-child(1) {margin-left: 0;border-color: #1f5975;color: #1ca4ff;}
.screen-3__type-item:nth-child(1):after
.screen-3__type-item:nth-child(1):beofre {border-color: #1f5975;background: #1f5975;color: #1ca4ff;}
.screen-3__type-item:nth-child(2),
.screen-3__type-item:nth-child(2):after,
.screen-3__type-item:nth-child(2):before {border-color: #424d76;color: #4f7df0;}
.screen-3__type-item:nth-child(3),
.screen-3__type-item:nth-child(3):after,
.screen-3__type-item:nth-child(3):before {border-color: #6b4146;color: #dd413b;}
.screen-3__type-item:nth-child(4),
.screen-3__type-item:nth-child(4):after,
.screen-3__type-item:nth-child(4):before {border-color: #29535f;color: #2a9dda;}
.screen-3__type-item:nth-child(5),
.screen-3__type-item:nth-child(5):before,
.screen-3__type-item:nth-child(5):after {border-color: #3e4e40;color: #90b045;}
/* screen-4 */
.screen-4 {height: 640px;background: #f3f5f7;}
.screen-4__wrap {height: 640px;width: 1200px;margin: 0 auto;position: relative;}
.screen-4__heading {position: absolute;top: 88px;font-size: 36px;color: #07111b;text-align: center;width: 100%;}
.screen-4__heading:after {content: ' ';display: block;width: 50px;height: 2px;background: #f00;position: absolute;left: 50%;margin-left: -25px;bottom: -30px;}
.screen-4__subheading {position: absolute;top: 188px;font-size: 16px;line-height: 25px;font-weight: 100;color: #07111b;text-align: center;width: 100%;}
.screen-4__type {margin-left: -60px;position: absolute;top: 288px;}
.screen-4__type-item {display: inline-block;width: 160px;height: 120px;margin-left: 140px;position: relative;}
.screen-4__type-item:nth-child(1) {background: url("../images/sc4-1.png") no-repeat center top;}
.screen-4__type-item:nth-child(2) {background: url("../images/sc4-2.png") no-repeat center top;}
.screen-4__type-item:nth-child(3) {background: url("../images/sc4-3.png") no-repeat center top;}
.screen-4__type-item:nth-child(4) {background: url("../images/sc4-4.png") no-repeat center top;}
.screen-4__type-item-text {position: absolute;text-align: center;bottom: 0;display: block;width: 100%;font-size: 14px;color: #333;}
/* screen-5 */
.screen-5 {height: 640px;background: url("../images/sc5.jpg") no-repeat;background-size: cover;}
.screen-5__wrap {width: 1200px;height: 640px;margin: 0 auto;position: relative;}
.screen-5__pic {position: absolute;left: 50%;margin-left: -100px;top: 100px;width: 200px;height: 200px;background: url("../images/sc5-1.png") no-repeat center top;}
.screen-5__heading {position: absolute;top: 360px;font-size: 36px;color: #fff;width: 100%;text-align: center;}
.screen-5__heading::after {content: ' ';display: block;width: 50px;height: 2px;background: #fff;position: absolute;left: 50%;margin-left: -25px;bottom: -30px;}
.screen-5__subheading {position: absolute;top: 460px;font-size: 16px;line-height: 25px;font-weight: 100;color: #fff;text-align: center;width: 100%;}
/* submit-area */
.submit-area {height: 200px;background: #fff;}
.submit-area__wrap {width: 1200px;height: 200px;margin: 0 auto;position: relative;}
.submit-area-button {position: absolute;display: block;width: 230px;height: 60px;left: 50%;margin-left: -115px;top: 50%;margin-top: -30px;line-height: 60px;border: 1px solid #666;text-align: center;font-size: 18px;color: #666;border-radius: 5px;transition: all .3s ease;}
.submit-area-button:hover {color: #f00;box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);}
/* footer */
.footer {height: 100px;background: #000;}
.footer__wrap {width: 1200px;margin: 0 auto;text-align: center;position: relative;}
.footer__type {text-align: center;position: absolute;top: 30px;width: 100%;}
.footer__type-item {margin-left: 30px;font-size: 12px;color: #999;transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;}
.footer__type-item:hover {color: #e53e3e;}
.footer__copy {font-size: 14px;color: #666;position: absolute;top: 60px;width: 100%;text-align: center;}
/* outline */
.outline {position: fixed;padding: 5px 10px;bottom: 120px;right: 0;z-index: 6;background-color: #fff;box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);}
.outline__item {display: block;width: 40px;height: 30px;line-height: 30px;padding: 5px 0;background: rgb(255, 255, 255);margin: 5px 0px 0px;border-top: 1px solid #eee;text-align: center;color: #93999f;}
.outline__item:first-child {border: none;}
.outline__item_status_active {color: #ff0000;}animation.css
/* screen-1 */
.screen-1__heading {
transition: all 1s ease;
}
.screen-1__heading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-1__heading__animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-1__subheading {
transition: all 1s ease;
}
.screen-1__subheading_animate_init {
opacity: 0;
transform: translate(0, -100%);
}
.screen-1__heading__animate_done {}
/* screen-2 */
.screen-2__heading {
transition: all 1s ease;
}
.screen-2__heading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-2__heading_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-2__subheading {
transition: all 1s ease .3s;
}
.screen-2__subheading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-2__subheading_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-2__pic-i-1 {
transition: all 1s ease .2s;
}
.screen-2__pic-i-1_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-2__pic-i-1_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-2__pic-i-2 {
opacity: 0;
}
.screen-2__pic-i-2_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-2__pic-i-2_animate_done {
animation: screenPicDone .3s ease 1s forwards;
}
.screen-3__type-item {
position: relative;
}
.screen-3__type-item:after,
.screen-3__type-item:before {
content: " ";
position: absolute;
display: block;
left: -3px;
top: -3px;
width: 58px;
height: 58px;
line-height: 60px;
border-radius: 50%;
border: 2px solid #1f5975;
z-index: -1;
}
.screen-3__type-item:after {
animation: breathe 1s ease 1s infinite;
}
.screen-3__type-item:before {
animation: breathe 1s ease 2s infinite;
}
@-webkit-keyframes breathe {
0% {
transform: scale(.95);
}
100% {
transform: scale(1.03);
}
}
/* 自定义动画形式位置大小 */
@-webkit-keyframes screenPicDone {
0% {
opacity: 1;
transform: translate(0, 50%);
}
30% {
opacity: 1;
transform: translate(0, -10%);
}
60% {
opacity: 1;
transform: translate(0, 10%);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
/* screen-3 */
.screen-3__pic {
transition: all 1s ease;
}
.screen-3__pic_animate_init {
opacity: 0;
transform: translate(0, 100%) scale(.5);
}
.screen-3__pic_animate_done {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.screen-3__heading {
transition: all 1s ease;
}
.screen-3__heading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-3__heading_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-3__subheading {
transition: all 1s ease .3s;
}
.screen-3__subheading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-3__subheading_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-3__type {
opacity: 0;
}
.screen-3__type_animate_init {
opacity: 0;
}
.screen-3__type_animate_done {
animation: screenPicDone .3s ease 1s forwards;
}
/*.screen-3__type-item {
position: relative;
animation: breathe 3s ease 1s infinite;
}*/
/* 自定义动画形式位置大小 */
/* screen-4 */
.screen-4__heading {
transition: all 1s ease;
}
.screen-4__heading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-4__heading_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-4__subheading {
transition: all 1s ease .3s;
}
.screen-4__subheading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-4__subheading_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-4__type-item-i-1,
.screen-4__type-item-i-2,
.screen-4__type-item-i-3,
.screen-4__type-item-i-4 {
transition: all 1s ease .6s;
}
.screen-4__type {}
.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;
transform: translate(0, 100%) scale(.1);
}
.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_home {
opacity: 1;
transform: translate(0, 0) scale(1);
}
/* screenw-5 */
.screen-5__heading {
transition: all 1s ease;
}
.screen-5__heading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-5__heading_animate_dome {
opacity: 1;
transform: translate(0, 0);
}
.screen-5__subheading {
transition: all 1s ease .3s;
}
.screen-5__subheading_animate_init {
opacity: 0;
transform: translate(0, 100%);
}
.screen-5__subheading_animate_done {
opacity: 1;
transform: translate(0, 0);
}
.screen-5__pic {
transition: all 1s ease;
}
.screen-5__pic_animate_init {
transform: translate(0, 0) scale(.3);
}
.screen-5__pic_animate_done {
opacity: 1;
transform: translate(0, 0) scale(1);
}
/* outline */
.outline {
opacity: 0;
transition: all 1s ease;
transform: translate(100%, 0);
}
.outline_status_in {
opacity: 1;
transform: translate(0, 0);
}
/*header */
.header_status_black {
background: rgba(0, 0, 0, .8);
}
.header_status_black .header__logo {
color: #fff;
}
.header_status_black .header__nav-item {
color: #fff;
}
/* header__nav-tip */
.header__nav-tip {
position: absolute;
width: 55px;
height: 2px;
background: #f00;
left: 0;
bottom: 0;
transition: all .5s ease;
}
script.js
// 根据class 获取元素
var getElement = function(selector) {
return document.querySelector(selector);
}
// 根据class 获取所有有次class 的元素
var getAllElement = function(selector) {
return document.querySelectorAll(selector);
}
// 获取元素class
var getClass = function(element) {
return element.getAttribute("class");
}
// 给元素设置class
var setClass = function(element, cls) {
return element.setAttribute("class", cls);
}
// 给元素添加样式
var addClass = function(element, cls) {
var baseCls = getClass(element);
if (baseCls.indexOf(cls) === -1) {
setClass(element, baseCls + " " + cls);
}
}
// 元素删除指定样式
var delClass = function(element, cls) {
var baseCls = getClass(element);
if (baseCls.indexOf(cls) != -1) {
setClass(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' '));
}
}
// screenAnimateElements
var screenAnimateElements = {
'.screen-1': [
'.screen-1__heading',
'.screen-1__subheading',
],
'.screen-2': [
'.screen-2__heading',
'.screen-2__subheading',
'.screen-2__pic-i-1',
'.screen-2__pic-i-2',
],
'.screen-3': [
'.screen-3__pic',
'.screen-3__heading',
'.screen-3__subheading',
'.screen-3__type',
],
'.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__subheading',
'.screen-5__pic',
]
}
// 初始化样式
var setScreenAnimateInit = function(screenCls) {
//对当前元素数组进行遍历
var AnimateElements = screenAnimateElements[screenCls];
for (var i = 0; i < AnimateElements.length; i++) {
// 获取当前元素的DOM结构
var element = getElement(AnimateElements[i]);
// 获取当前元素的class
var baseCls = getClass(element);
// 给元素添加class
element.setAttribute("class", baseCls + " " + baseCls + "_animate_init");
}
}
// 播放屏幕元素动画
var playScreenAnimateDone = function(screenCls) {
var AnimateElements = screenAnimateElements[screenCls];
for (var i = 0; i < AnimateElements.length; i++) {
// 获取当前元素的DOM结构
var element = getElement(AnimateElements[i]);
// 获取当前元素的class
var baseCls = getClass(element);
// 给元素的样式设置为 Done
element.setAttribute("class", baseCls.replace("_animate_init", "_animate_done"));
}
}
// 第二步页面滚动到那个屏幕 那个屏幕就播放动画
window.onscroll = function() {
var top = document.body.scrollTop;
if (top > 80) {
playScreenAnimateDone(".screen-1");
addClass(getElement(".header"), "header_status_black")
addClass(getElement(".outline"), "outline_status_in");
} else {
delClass(getElement(".header"), "header_status_black");
delClass(getElement(".outline"), "outline_status_in");
navTip.style.left = 0 * 88 + "px";
}
if (top > 640 * 1 - 150) {
playScreenAnimateDone(".screen-2");
navTip.style.left = 1 * 88 + "px";
}
if (top > 640 * 2 - 100) {
playScreenAnimateDone(".screen-3");
navTip.style.left = 2 * 88 + "px";
}
if (top > 640 * 3 - 150) {
playScreenAnimateDone(".screen-4");
navTip.style.left = 3 * 88 + "px";
}
if (top > 640 * 4 - 250) {
playScreenAnimateDone(".screen-5");
navTip.style.left = 4 * 88 + "px";
}
}
// 滑动门特效
var navTip = getElement(".header__nav-tip");
var header = getElement(".header");
var navItems = getAllElement(".header__nav-item");
var outlines = getAllElement(".outline__item");
// 定义nav 指针变量
var nav_index = 0;
for (var i = 0; i < navItems.length - 1; i++) {
navItems[i].setAttribute("data-index", i);
navActiveClass = getClass(navItems[i]);
// 鼠标划伤导航栏的特效
navItems[i].onmouseover = function() {
nav_index = this.getAttribute("data-index");
navTip.style.left = nav_index * 88 + "px";
return false;
}
// 删除选中状态的class
navItems[i].onclick = function() {
for (var i = 0; i < navItems.length; i++) {
delClass(navItems[i], "header__nav-item-active");
}
addClass(this, "header__nav-item-active");
var nav_index = this.getAttribute("data-index");
document.body.scrollTop = nav_index * 600;
}
// 离开恢复当前选中的屏幕
navItems[i].onmouseout = function() {
for (var i = 0; i < navItems.length; i++) {
if (getClass(navItems[i]).indexOf("header__nav-item-active") != -1) {
navTip.style.left = i * 88 + "px";
}
}
}
}
// console.log(outlines);
// 点击右侧导航大纲是发生页面滚动
for (var i = 0; i < outlines.length; i++) {
outlines[i].setAttribute("data-index", i);
outlines[i].onclick = function() {
for (var i = 0; i < outlines.length; i++) {
delClass(navItems[i], "outline__item-active");
}
addClass(this, "outline__item-active");
console.log(this);
nav_index = this.getAttribute("data-index");
console.log(nav_index);
document.body.scrollTop = nav_index * 640;
}
}
// 点击获取更多按钮发成的click事件
getElement(".submit-area-button").onclick = function() {
document.body.scrollTop = 0;
}
window.onload = function() {
for (k in screenAnimateElements) {
if (k === ".screen-1") {
continue;
}
setScreenAnimateInit(k);
}
}
setTimeout(function() {
playScreenAnimateDone(".screen-1");
}, 300);
扫一扫
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
