关于侧边栏
HTML代码：
<html>
<head>
<meta charset="utf-8">
<title>慕课手机</title>
<link rel="stylesheet" type="text/css" href="./css/base.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<link rel="stylesheet" type="text/css" href="./css/animate.css" />
</head>
<body>
<div class="box">
<header class="header">
<div class="header__wrap">
<div class="header__logo">慕课手机</div>
<nav class="header__nav">
<a href="javascript:;" class="header__nav-item header__nav-item_status_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"><b>慕课手机</b> 让你的生活更精彩</h2>
<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__subheading">采用受欢迎的设计，让它更加出色。<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_custom_right screen-2__point_i_2">超薄机身</div>
<div class="screen-2__point screen-2__point_custom_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__subheading">采用受欢迎的设计，让它更加出色。<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__subheading">找到适合你的手机</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">16G/32G/64G</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">16G/32G/64G</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">16G/32G/64G</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">16G/32G/64G</div>
</div>
</div>
<!--end type-->
</div>
<!--end warp-->
</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 class="footer">
© 2016 imooc.com 京ICP备13046642号
</footer>
<div class="outline">
<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>
<a href="javascript:;" class="outline__item">说明</a>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
animate.css代码：
/*第一屏*/
.screen-1__heading{
transition:all 1s;
}
.screen-1__heading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-1__heading_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-1__phone{
transition:all 1s;
}
.screen-1__phone_animate_init{
transform:translate(0,-100%);
opacity:0;
}
.screen-1__phone_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-1__shadow{
transition:all 1s;
}
.screen-1__shadow_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-1__shadow_animate_done{
transform:translate(0,0);
opacity:1;
}
/*第二屏*/
.screen-2__heading{
transition:all 1s;
}
.screen-2__heading_animate_init{
transform:translate(0,-100%);
opacity:0;
}
.screen-2__heading_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-2__phone{
transition:all 1s;
}
.screen-2__phone_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-2__phone_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-2__subheading{
transition:all 1s;
}
.screen-2__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-2__subheading_animate_done{
transform:translate(0,0);
opacity:1;
}
.screen-2__point{
transition:all 1s 1s;
}
.screen-2__point_i_1_animate_init{
transform:translate(-100%,0);
opacity:0;
}
.screen-2__point_i_2_animate_init{
transform:translate(100%,0);
}
.screen-2__point_i_3_animate_init{
transform:translate(100%,0);
}
/*第三屏*/
.screen-3__heading,.screen-3__subheading,
.screen-3__phone,.screen-3__features{
transition:all 1s;
}
.screen-3__heading_animate_init{
transform:translate(0,-100%);
opacity:0;
}
.screen-3__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-3__phone_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-3__features_animate_init{
transform:scale(.5);
opacity:0;
}
.screen-3__features__item:hover{
transform:scale(1.1);
transition: all 1s;
cursor:pointer;
border-color:#fff;
}
/*第四屏*/
.screen-4__heading,.screen-4__subheading,
.screen-4__type{
transition:all 1s;
}
.screen-4__heading_animate_init{
transform:translate(0,-100%);
opacity:0;
}
.screen-4__type__item_i_1{transition:all 1s 0.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__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.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-5__heading,.screen-5__subheading,
.screen-5__bg{
transition:all 1s;
}
.screen-5__heading_animate_init{
transform:translate(0,-100%);
opacity:0;
}
.screen-5__subheading_animate_init{
transform:translate(0,100%);
opacity:0;
}
.screen-5__bg_animate_init{
transform:translate(0,100%);
opacity:0;
}
/*定义帧动画*/
@-webkit-keyframes bounce{
0% {transform:scale(0)};
50% {transform:scale(1)};
100% {transform:scale(1);}
}
/*使用帧动画*/
.screen-2__point:before,.screen-2__point:after{
content:"";
display:block;
width:20px;
height:20px;
background-color: rgba(255,0,0,.4);
position:absolute;
left:0;
top:0;
-webkit-animation:bounce 2s infinite;
border-radius:50%;
}
.screen-2__point_i_1:before,.screen-2__point_i_1:after{
left:auto;
right:0;
top:0;
}
.screen-2__point_i_1:after{
-webkit-animation:bounce 2s infinite 1s;
}
.screen-2__point:after{
-webkit-animation:bounce 2s infinite 1s;
}
.header{
transition:all 1s;
}
.header_status_black{
background-color:rgba(0,0,0,.5);
position:fixed;
top:0;
left:0;
right:0;
z-index:3;
}
.header__logo, .header__nav-item{
color:#fff;
}
.outline{
transition:all 1s;
opacity:0;
transform:translate(100%,0);
}
.outline_status_in{
opacity:1;
transform:translate(0,0);
}
index.js
//获取元素
var getEle=function(selector){
return document.querySelector(selector);
}
var getEleAll=function(selector){
return document.querySelectorAll(selector);
}
//获取元素样式
var getCls=function(element){
return element.getAttribute("class");
}
//设置元素样式
var setCls=function(element,b){
return element.setAttribute("class",b);
}
//为元素添加样式
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," "));
}
}
//设置JS交互
//第一步 ：初始化样式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 setscreenElementInit=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");
}
}
//设置元素done
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;
setscreenElementInit(k);
}
}
//第二步，滚动到哪就播放到哪
window.onscroll=function(){
var top=document.body.scrollTop;
console.log(top);
if(top>80){
addCls(getEle(".header"),"header_status_black")
addCls(getEle(".outline"),"outline_status_in")
}else{delCls(getEle(".header"),"header_status_black");
delCls(getEle(".outline"),"outline_status_in");
}
if(top>1){playscreenAnimateDone(".screen-1");}
if(top>800*1-100){playscreenAnimateDone(".screen-2");}
if(top>800*2-100){playscreenAnimateDone(".screen-3");}
if(top>800*3-100){playscreenAnimateDone(".screen-4");}
if(top>800*4-100){playscreenAnimateDone(".screen-5");}
}
//第三步双向定位
var nav=getEleAll(".header__nav-item");
var outline_1=getEleAll(".outline__item");
console.log(outline_1);
var setNavjump=function(i,lib){
var b=lib[i];
b.onclick=function(){
document.body.scrollTop=800*i;
}
}
for(var i=0;i<nav.length;i++){
setNavjump(i,nav);
/*setNavjump(i,outline_1);*/
}
//第四步活动门特效
var nav=getEleAll(".header__nav-item");
var tip=getEle(".header__nav-tip");
var setTip=function(i,lib){
nav[i].addEventListener("mouseover",function()
{tip.style.left=i*70+"px"},false);
var aictiveIdx=0;
nav[i].onmouseout=function(){
console.log(this);
for(var i=0;i<nav.length;i++){
if(getCls(nav[i]).indexOf("header__nav-item_status_active")>-1){
aictiveIdx=i;
break;
}
}tip.style.left=(aictiveIdx*70)+"px";
}
}
for(var i=0;i<nav.length;i++){
setTip(i,nav);
}
//小优化，默认载入第一屏动画
setTimeout(function(){playscreenAnimateDone(".screen-1")},200)
老师我发现像图中注释掉setNavjump后，页面其他动画可以播放，但是侧边栏没有效果
而如果我不注释，侧边栏有效果，但是第一屏的setTimeout效果就没有了，并且控制栏也报错了，这是为什么
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星