导航栏问题
# 具体遇到的问题
1. 无法实现滚动条控制页面切换
请问代码哪里有问题？
2. 侧边导航栏active样式不显示，请问如何修改
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
pj2Anima.css
.screen-1__h1{
transition:all 1s;
}
.screen-1__h1_animate_init{
opacity:0;
transform:translate(0, 50%);
}
.screen-1__h1_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-1__h2{
transition:all 2s;
}
.screen-1__h2_animate_init{
opacity:0;
transform:translate(0, 50%);
}
.screen-1__h2_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-2__h1{
transition:all 1s;
}
.screen-2__h1_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-2__h1_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-2__h2{
transition:all 2s;
}
.screen-2__h2_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-2__h2_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-2__pt1{
transition:all 1s 1s;
}
.screen-2__pt1_animate_init{
opacity:0;
}
.screen-2__pt1_animate_done{
opacity:1;
}
.screen-2__pt2{
animation:bounce 0.8s ease-in-out 6s;
animation-fill-mode: both;
}
.screen-3__pt1{
transition:all 2s;
}
.screen-3__pt1_animate_init{
opacity:0;
transform: translate(30%, 0);
transform:scale(0.2);
}
.screen-3__pt1_animate_done{
opacity:1;
transform: translate(0, 0);
transform:scale(1);
}
.screen-3__h1{
transition:all 1s;
}
.screen-3__h1_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-3__h1_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-3__h2{
transition:all 2s;
}
.screen-3__h2_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-3__h2_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-3__nav{
animation:bounce .8s ease-in-out 8s;
animation-fill-mode: both;
}
.screen-4__features{
transition:all 2s;
}
.screen-4__features_animate_init{
opacity:0;
transform:scale(0.2);
}
.screen-4__features_animate_done{
opacity:1;
transform:scale(1);
}
.screen-4__h1{
transition:all 1s;
}
.screen-4__h1_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-4__h1_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-4__h2{
transition:all 2s;
}
.screen-4__h2_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-4__h2_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-5__pic{
transition:all 2s;
}
.screen-5__pic_animate_init{
opacity:0;
transform:scale(0.2);
}
.screen-5__pic_animate_done{
opacity:1;
transform:scale(1);
}
.screen-5__h1{
transition:all 1s;
}
.screen-5__h1_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-5__h1_animate_done{
opacity:1;
transform:translate(0, 0);
}
.screen-5__h2{
transition:all 2s;
}
.screen-5__h2_animate_init{
opacity:0;
transform:translate(0, -100%);
}
.screen-5__h2_animate_done{
opacity:1;
transform:translate(0, 0);
}
@keyframes bounce{
0%{
opacity:0;
transform: translate(0, 50%);
}
30%{
opacity:1;
transform:translate(0, -30%);
}
60%{
transform: translate(0, 10%);
}
80%{
transform:translate(0, -10%);
}
100%{
transform:translate(0, 0);
}
}
@keyframes glitch{
0%{
clip-path: var(--slice-1);
transform:translate(-20px, -10px);
}
10%{
clip-path:var(--slice-3);
transform:translate(10px, 10px);
}
20%{
clip-path:var(--slice-1);
transform:translate(-10px, 10px);
}
30%{
clip-path:var(--slice-3);
transform:translate(0px, 5px);
}
40%{
clip-path:var(--slice-2);
transform:translate(-5px, 0px);
}
50%{
clip-path:var(--slice-4);
transform:translate(5px, 10px);
}
60%{
clip-path:var(--slice-4);
transform:translate(5px, 10px);
}
70%{
clip-path:var(--slice-2);
transform:translate(-10px, 10px);
}
80%{
clip-path:var(--slice-5);
transform:translate(20px, -10px);
}
90%{
clip-path:var(--slice-1);
transform:translate(-10, 0px);
}
100%{
clip-path:var(--slice-1);
transform:translate(0);
}
}
button:hover{
cursor:pointer;
}
button:hover::after{
animation:glitch 1s steps(2, end);
}
pj2.css
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.header__nav a:link,
.header__nav a:visited{
color:white;
}
.header{
width:100%;
color:#fff;
height:80px;
position:fixed;
margin:0 auto;
z-index:9;
background:rgba(0,0,0,0.3);
}
.header__logo{
width:150px;
background:url("../图片素材/img/logo.png") left center no-repeat;
background-size:38px 38px;
height:80px;
position:absolute;
top:50%;
margin-top:-40px;
line-height:80px;
text-indent:50px;
left:10px;
}
.header__logo:hover{
cursor:pointer;
color:rgb(160, 157, 157);
}
.header__nav{
position:absolute;
height:40px;
right:30px;
top:50%;
margin-top:-20px;
}
.header__nav-item{
width:90px;
height:40px;
display:block;
float:left;
font-size:13px;
text-align:center;
line-height:40px;
}
.header__nav-item_button{
background:red;
border-radius:5px;
}
.header__nav-item_button:hover{
background:rgb(163, 5, 5);
}
/* .header__nav-item_active::after{
content:"";
display:block;
width:60%;
height:2px;
background:red;
margin:0 auto;
} */
.header__nav-tip{
position: absolute;
width: 50px;
margin-left: 20px;
height: 2px;
background: #f00;
left: 0;
bottom: 0;
transition: all .5s;
}
.screen-1{
width:1200px;
height:640px;
background:url("../图片素材/img/sc1.jpg") no-repeat;
background-size:cover;
position:relative;
text-align: center;
color:white;
}
.screen-1__h1{
padding-top:250px;
}
.screen-1__h2{
padding-top:10px;
padding-left:5px;
font-weight:normal;
padding-bottom:30px;
}
button, button::after{
margin:0 auto;
width:380px;
height:86px;
font-size:36px;
font-family:'Bebas Neue', cursive;
background:linear-gradient(45deg, transparent 5%, #FF013C 5%);
border:0;
color:#fff;
letter-spacing:3px;
line-height:88px;
box-shadow:6px 0px 0px #00E6F6;
outline:transparent;
position:relative;
}
button::after{
--slice-0:inset(50% 50% 50% 50%);
--slice-1:inset(80% -6px 0 0);
--slice-2:inset(50% -6px 30% 0);
--slice-3:inset(10% -6px 85% 0);
--slice-4:inset(40% -6px 43% 0);
--slice-5:inset(80% -6px 5% 0);
content:'AVAILABLE NOW';
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
background:linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
text-shadow:-3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
clip-path:var(--slice-0);
}
.screen-2{
width:1200px;
height:640px;
background:url("../图片素材/img/sc2.png") bottom center no-repeat;
background-size:50% 46%;
text-align: center;
position:relative;
z-index:1;
}
.screen-2__h1{
padding-top:100px;
}
.screen-2__h1::after{
content:"";
display: block;
background:red;
width:40px;
height:2px;
margin:0 auto;
margin-top:16px;
margin-bottom:13px;
}
.screen-2__h2{
font-weight: normal;
}
.screen-2__pt1{
width:300px;
height:600px;
background:url("../图片素材/img/sc2-1.png") center center no-repeat;
background-size:80% 55%;
position: relative;
margin:0 auto;
z-index:3;
margin-top:-38px;
}
.screen-2__pt2{
width:266px;
height:285px;
background:url("../图片素材/img/sc2-2.png") center center no-repeat;
background-size:80% 60%;
z-index:2;
position:absolute;
top:335px;
left:550px;
}
.screen-3{
width:1200px;
height:640px;
background: #293134;
color:white;
position:relative;
}
.screen-3__h1{
position:absolute;
top:200px;
left:700px;
}
.screen-3__h1::after{
content:"";
display:block;
background:red;
width:40px;
height:2px;
margin-top:18px;
}
.screen-3__h2{
position:absolute;
top:270px;
left:700px;
font-weight: normal;
}
.screen-3__nav{
position:absolute;
top:480px;
left:700px;
}
.screen-3__nav-item{
float:left;
font-size:13px;
border-radius:50%;
width:56px;
height:56px;
text-align: center;
line-height: 56px;
margin-right:28px;
}
.screen-3__nav-item:nth-child(1){
border:4px solid rgba(66, 167, 210, .3);
color:#46B3E1;
}
.screen-3__nav-item:nth-child(2){
border:4px solid rgba(131, 86, 219, .3);
color:#6D50E2;
}
.screen-3__nav-item:nth-child(3){
border:4px solid rgba(234, 68, 12, .3);
color:#EA440C;
}
.screen-3__nav-item:nth-child(4){
border:4px solid rgba(12, 234, 230, .3);
color:rgba(12, 234, 230, .8);
}
.screen-3__nav-item:nth-child(5){
border:4px solid rgba(158, 242, 63, .3);
color:rgba(158, 242, 63, .8);
}
.screen-3__pt1{
position:absolute;
left:-70px;
background:url("../图片素材/img/sc3.png") center center no-repeat;
background-size:70% 70%;
width:640px;
height:640px;
}
.screen-4{
width:1200px;
height:640px;
position:relative;
margin:0 auto;
}
.screen-4__h1{
text-align:center;
padding-top:80px;
}
.screen-4__h1::after{
content:"";
display:block;
background:red;
width:40px;
height:2px;
margin:0 auto;
margin-top:18px;
}
.screen-4__h2{
text-align:center;
font-weight:normal;
padding-top:16px;
}
.screen-4__features{
position:absolute;
width:1000px;
left:50%;
margin-left:-400px;
top:45%;
}
.screen-4__features-item{
float:left;
margin-right:90px;
}
.screen-4__features-pic{
width:60px;
height:60px;
margin-left:28px;
padding-bottom:40px;
}
.screen-4__features-pic1{
background:url("../图片素材/img/sc4-1.png") center center no-repeat;
background-size:contain;
margin-left:40px;
}
.screen-4__features-pic2{
background:url("../图片素材/img/sc4-2.png") center center no-repeat;
background-size:contain;
}
.screen-4__features-pic3{
background:url("../图片素材/img/sc4-3.png") center center no-repeat;
background-size:contain;
}
.screen-4__features-pic4{
background:url("../图片素材/img/sc4-4.png") center center no-repeat;
background-size:contain;
margin-left:40px;
}
.screen-5{
width:1200px;
height:640px;
background:url("../图片素材/img/sc5.jpg") no-repeat;
position:relative;
color:white;
}
.screen-5__pic{
background:url("../图片素材/img/sc5-1.png") center center no-repeat;
width:300px;
height:300px;
position:absolute;
left:50%;
margin-left:-130px;
top:50px;
}
.screen-5__h1{
position:absolute;
top:340px;
left:450px;
}
.screen-5__h1::after{
content:"";
display:block;
background:white;
width:40px;
height:2px;
margin:0 auto;
margin-top:14px;
}
.screen-5__h2{
position:absolute;
top:420px;
left:340px;
font-weight: normal;
}
.screen-6{
width:1200px;
height:180px;
display: flex;
justify-content: center;
align-items: center;
}
.screen-6__button{
text-align:center;
color:black;
border:1px solid black;
border-radius:3px;
width:200px;
height:50px;
line-height:50px;
}
.screen-6__button:hover{
color:red;
cursor:pointer;
}
.footer{
width:1200px;
height:100px;
background:black;
text-align:center;
}
.footer__nav{
padding-top:20px;
}
.footer__nav a:hover{
cursor:pointer;
color:red;
}
.footer__nav a{
color:rgb(204, 202, 202);
}
.footer-item{
padding-left:28px;
font-size:12px;
}
.footer__txt{
padding-top:8px;
font-size:13px;
color:rgb(124, 124, 124);
}
.outline{
position: fixed;
padding: 5px 10px;
bottom: 120px;
right: 0;
background-color: #fff;
box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
z-index: 3;
}
.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;
}
.outline a:link,
.outline a:visited{
color:black;
}
.outline a:hover{
color:red;
}
.outline a .outline__item_active{
color:red;
}
pj2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/pj2.css"/>
<link rel="stylesheet" type="text/css" href="../css/pj2Anima.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
</head>
<body>
<div class="box">
<header class="header">
<div class="header__logo">
H5实战页面
</div>
<nav class="header__nav">
<a href="#" class="header__nav-item header__nav-item_active">实战课程</a>
<a href="#" class="header__nav-item">商业案例</a>
<a href="#" class="header__nav-item">课程体系</a>
<a href="#" class="header__nav-item">集成环境</a>
<a href="#" class="header__nav-item">云端学习</a>
<a href="#" class="header__nav-item header__nav-item_button">即刻学习</a>
<div class="header__nav-tip"></div>
</nav>
</header>
<div class="screen-1">
<h1 class="screen-1__h1 screen-1__h1_animate_init">实战课程重磅上线</h1>
<h6 class="screen-1__h2 screen-1__h2_animate_init">一键云学习，还在等待什么？</h6>
<button>AVAILABLE NOW</button>
</div>
<div class="screen-2">
<h1 class="screen-2__h1 screen-2__h1_animate_init">每门课都是真实商业案例</h1>
<h5 class="screen-2__h2 screen-2__h2_animate_init">真实案例，真实场景，在实战中实践、操作、调试<br/>
大牛带你体验BAT真实开发流程，所有开发过程一一为你呈现
</h5>
<div class="screen-2__pt1 screen-2__pt1_animate_init"></div>
<div class="screen-2__pt2 screen-2__pt2_animate_init"></div>
</div>
<div class="screen-3">
<div class="screen-3__pt1"></div>
<h2 class="screen-3__h1">强大的语言课程体系支持</h2>
<h5 class="screen-3__h2">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决,<br/>
让你体验开发全流程
</h5>
<nav class="screen-3__nav">
<div class="screen-3__nav-item">HTML5</div>
<div class="screen-3__nav-item">PHP</div>
<div class="screen-3__nav-item">JAVA</div>
<div class="screen-3__nav-item">Python</div>
<div class="screen-3__nav-item">Node.js</div>
</nav>
</div>
<div class="screen-4">
<h1 class="screen-4__h1">省去本地复杂的环境搭建</h1>
<h4 class="screen-4__h2">你可以告别在虚拟机中调试开发了</h4>
<div class="screen-4__features">
<div class="screen-4__features-item">
<div class="screen-4__features-pic screen-4__features-pic1">
</div>
<div class="screen-4__features-txt">
实战课程集成开发环境
</div>
</div>
<div class="screen-4__features-item">
<div class="screen-4__features-pic screen-4__features-pic2">
</div>
<div class="screen-4__features-txt">
内置终端命令行
</div>
</div>
<div class="screen-4__features-item">
<div class="screen-4__features-pic screen-4__features-pic3">
</div>
<div class="screen-4__features-txt">
编译你的应用程序
</div>
</div>
<div class="screen-4__features-item">
<div class="screen-4__features-pic screen-4__features-pic4">
</div>
<div class="screen-4__features-txt">
通过云端服务输出效果
</div>
</div>
</div>
</div>
<div class="screen-5">
<div class="screen-5__pic"></div>
<h1 class="screen-5__h1">云端学习可以这样简单</h1>
<h5 class="screen-5__h2">看视频，敲代码，一气呵成，结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样</h5>
</div>
<div class="screen-6">
<div class="screen-6__button">继续了解学习体验</div>
</div>
<footer class="footer">
<div class="footer__nav">
<a href="#" class="footer-item">网站首页</a>
<a href="#" class="footer-item">人才招聘</a>
<a href="#" class="footer-item">联系我们</a>
<a href="#" class="footer-item">高校联盟</a>
<a href="#" class="footer-item">关于我们</a>
<a href="#" class="footer-item">讲师招募</a>
<a href="#" class="footer-item">意见反馈</a>
<a href="#" class="footer-item">友情链接</a>
</div>
<div class="footer__txt">
Copyright © 2015 imooc.com All Rights Reserved | 京ICP备13046642号-2
</div>
</footer>
<div class="outline">
<a href="#" class="outline__item outline__item_active">实</a>
<a href="#" class="outline__item">商</a>
<a href="#" class="outline__item">课</a>
<a href="#" class="outline__item">集</a>
<a href="#" class="outline__item">云</a>
<a href="#" class="outline__item">即</a>
</div>
</div>
<script src="../js/pj2.js"></script>
</body>
</html>
pj2.js
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);
}
return;
}
var delCls = function(element, cls){
var baseCls = getCls(element);
if(baseCls.indexOf(cls) > -1){
setCls(element, baseCls.split(cls).join(' ').replace(/\s+/g,' '));
}
return;
}
var screenAnimateElements = {
'.screen-1' : [
'.screen-1__h1',
'.screen-1__h2'
],
'.screen-2' : [
'.screen-2__h1',
'.screen-2__h2',
'.screen-2__pt1',
'.screen-2__pt2'
],
'.screen-3' : [
'.screen-3__pt1',
'.screen-3__h1',
'.screen-3__h2',
'.screen-3__nav',
],
'.screen-4' : [
'.screen-4__h1',
'.screen-4__h2',
'.screen-4__features'
],
'.screen-5' : [
'.screen-5__pic',
'.screen-5__h1',
'.screen-5__h2',
]
};
function setScreenAnimateInit(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');
}
}
window.onload = function(){
for(k in screenAnimateElements){
if(k == '.screen-1' || k == '.screen-2'){
continue;
}
setScreenAnimateInit(k);
}
}
function playScreenAnimateDone(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'));
}
}
setTimeout(function(){playScreenAnimateDone('.screen-1');},100);
var navItems = getAllElem('.header__nav-item');
var outLineItems = getAllElem('.outline__item');
var setNavJump = function(i, lib){
var elem = lib[i];
elem.onclick = function(){
document.scrollingElement.scrollTop = i * 640 +1;
document.body.scrollTop = i * 640 +1;
}
}
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(){
navTip.style.left = (idx * 90) +'px';
}
var currentIdx = 0;
lib[idx].onmouseout = function(){
for(var i = 0;i < lib.length; i++){
if(getCls(lib[i]).indexOf('.header__nav-item_active') > -1){
currentIdx = i;
break;
}
}
navTip.style.left = (currentIdx * 90) + 'px';
}
}
for(var i = 0; i < navItems.length; i++){
setTip(i, navItems);
}
var switchNavItemsActive = function(idx){
for(var i=0; i< navItems.length; i++){
delCls(navItems[i], '.header__nav-item_active');
navTip.style.left = 0 + 'px';
}
addCls(navItems[idx], '.header__nav-item-active');
navTip.style.left = (idx * 90 ) + 'px';
for(var i = 0; i<outLineItems.length; i++){
delCls(outLineItems[i], '.oueline__item_active');
}
addCls(outLineItems[idx], '.outline__item_active');
}
window.onscroll = function(){
var top = document.body.scrollTop | document.documentElement.scrollTop;
if(top > 1){
switchNavItemsActive(0);
}
if(top>640-80){
playScreenAnimateDone('.screen-2');
switchNavItemsActive(1);
}
if(top>640*2-80){
playScreenAnimateDone('.screen-3');
switchNavItemsActive(2);
}
if(top>640*3-80){
playScreenAnimateDone('.screen-4');
switchNavItemsActive(3);
}
if(top>640*4-80){
playScreenAnimateDone('.screen-5');
switchNavItemsActive(4);
}
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星