首頁猿問麻煩大神幫忙看看代碼的問題

麻煩大神幫忙看看代碼的問題

JavaScript

qq_sU_4 2016-06-19 20:22:46

<!DOCTYPE html><html><head> ? <meta charset="utf-8"> ? <title></title> ? <meta name="viewport" content="width=device-width,initial-scale=1"> ? <script type="text/javascript"> ? ? ?window.onload=function() { ? ? ? ? var navbar = document.getElementById('navbar'); ? ? ? ? var navbarLi = navbar.getElementsByTagName('li'); ? ? ? ? var content = document.getElementById('content'); ? ? ? ? var contentDiv = content.getElementsByTagName("div"); ? ? ? ? for(var i=0;i<navbarLi.length;i++){ ? ? ? ? ? ?navbarLi[i].i=i; ? ? ? ? ? ?navbarLi[i].onclick=function(){ ? ? ? ? ? ? ? scroll(contentDiv[this.i]); ? ? ? ? ? ?} ? ? ? ? } ? ? ? ? function scroll(obj){ ? ? ? ? ? ?var timer=null; ? ? ? ? ? ?clearInterval(timer); ? ? ? ? ? ?timer=setInterval(function(){ ? ? ? ? ? ? ? if(document.body.scrollTop<obj.offsetTop-380){ ? ? ? ? ? ? ? ? ?document.body.scrollTop+=10; ? ? ? ? ? ? ? } ? ? ? ? ? ? ? if(document.body.scrollTop>obj.offsetTop-380){ ? ? ? ? ? ? ? ? ?document.body.scrollTop-=10; ? ? ? ? ? ? ? } ? ? ? ? ? ?},1); ? ? ? ? } ? ? ?}; ? </script> ? <style type="text/css"> ? *{ ? ? ?margin: 0; ? ? ?padding: 0; ? } ? header{ ? ? ?width: 100%; ? ? ?height: 300px; ? ? ?position: fixed; ? ? ?top: 0; ? } ? header div{ ? ? ?width: 100%; ? ? ?height: 300px; ? ? ?background-color: pink; ? ? ?margin: 0 auto; ? } ? nav{ ? ? ?width: 100%; ? ? ?height: 50px; ? ? ?position: fixed; ? ? ?top: 300px; ? } ? ul{ ? ? ?width: 100%; ? ? ?height: 50px; ? ? ?background-color: gray; ? ? ?margin: 0 auto; ? ? ?list-style: none; ? } ? ul li{ ? ? ?width: 23%; ? ? ?height: 50px; ? ? ?float: left; ? ? ?text-align: center; ? ? ?line-height: 50px; ? ? ?margin: 0 1% 0; ? ? ?background-color: black; ? ? ?color: white; ? } ? ul li:hover{ ? ? ?cursor: pointer; ? } ? #content{ ? ? ?width: 100%; ? ? ?margin: 380px auto 0; ? } ? #content div{ ? ? ?width: 100%; ? ? ?height: 500px; ? ? ?background-color: pink; ? ? ?margin-bottom: 30px; ? ? ? ? }</style></head><body> ? <header> ? ? ?<div> ? ? ?</div> ? </header> ? <nav> ? ? ?<ul id="navbar"> ? ? ? ? <li>111111111111</li> ? ? ? ? <li>222222222222</li> ? ? ? ? <li>333333333333</li> ? ? ? ? <li>444444444444</li> ? ? ?</ul> ? </nav> ? <div id="content"> ? ? ?<div>1111111111111111</div> ? ? ?<div>2222222222222222</div> ? ? ?<div>3333333333333333</div> ? ? ?<div>4444444444444444</div> ? </div></body></html>

查看完整描述

1 回答

已采納

檸檬酸鈉

TA貢獻(xiàn)331條經(jīng)驗(yàn) 獲得超534個(gè)贊

<!DOCTYPE?html>
<html>
<head>
??<meta?charset="utf-8">
??<title></title>
??<meta?name="viewport"?content="width=device-width,initial-scale=1">
??<script?type="text/javascript">
?????window.onload=function()?{
????????var?navbar?=?document.getElementById('navbar');
????????var?navbarLi?=?navbar.getElementsByTagName('li');
????????var?content?=?document.getElementById('content');
????????var?contentDiv?=?content.getElementsByTagName("div");
????????for(var?i=0;i<navbarLi.length;i++){
???????????navbarLi[i].i?=?i;
???????????navbarLi[i].onclick?=?function(){
??????????????scroll(contentDiv[this.i]);
???????????};
????????}
????????function?scroll(obj){
???????????var?timer?=?null;
???????????clearInterval(timer);
???????????timer?=?setInterval(function(){
??????????????if(document.body.scrollTop?<?obj.offsetTop-380){
?????????????????document.body.scrollTop?+=?10;
??????????????}?else?if(document.body.scrollTop?>?obj.offsetTop-380){
?????????????????document.body.scrollTop?-=?10;
??????????????}?else?{
????????????????clearInterval(timer);
??????????????}
???????????},1);
????????}
?????};
??</script>
??<style?type="text/css">
??*{
?????margin:?0;
?????padding:?0;
??}
??header{
?????width:?100%;
?????height:?300px;
?????position:?fixed;
?????top:?0;
??}
??header?div{
?????width:?100%;
?????height:?300px;
?????background-color:?pink;
?????margin:?0?auto;
??}
??nav{
?????width:?100%;
?????height:?50px;
?????position:?fixed;
?????top:?300px;
??}
??ul{
?????width:?100%;
?????height:?50px;
?????background-color:?gray;
?????margin:?0?auto;
?????list-style:?none;
??}
??ul?li{
?????width:?23%;
?????height:?50px;
?????float:?left;
?????text-align:?center;
?????line-height:?50px;
?????margin:?0?1%?0;
?????background-color:?black;
?????color:?white;
??}
??ul?li:hover{
?????cursor:?pointer;
??}
??#content{
?????width:?100%;
?????margin:?380px?auto?0;
??}
??#content?div{
?????width:?100%;
?????height:?500px;
?????background-color:?pink;
?????margin-bottom:?30px;??????
??}
</style>
</head>
<body>
??<header>
?????<div>
?????</div>
??</header>
??<nav>
?????<ul?id="navbar">
????????<li>111111111111</li>
????????<li>222222222222</li>
????????<li>333333333333</li>
????????<li>444444444444</li>
?????</ul>
??</nav>
??<div?id="content">
?????<div>1111111111111111</div>
?????<div>2222222222222222</div>
?????<div>3333333333333333</div>
?????<div>4444444444444444</div>
??</div>
</body>
</html>

1 反對回復(fù) 2016-06-19