簡單樓層效果
阿新 • • 發佈：2019-01-03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0}
#container{width:1000px;margin:0 auto;}
#container>div{width:100%;height:500px;background-color:#ccc;font-size:120px;line-height:500px;text-align: center;color:#fff;}
#container>div:nth-of-type(2){background-color:red;}
#container>div:nth-of-type(3){background-color:blue;}
#container>div:nth-of-type(4){background-color:orange;}
#container>div:nth-of-type(5){background-color:cadetblue;}
#container>div:nth-of-type(6){background-color:pink;}
#container>div:nth-of-type(7){background-color:peru;}
#container>div:nth-of-type(8){background-color:cadetblue;}
#container>div:nth-of-type(9){background-color:black;}
#container>div#header,#container>div#footer{height:200px;}
#container>div#header{height:380px;line-height:380px;}
ul{list-style:none;position:fixed;top:280px;margin-left:-80px;}
ul>li{cursor:pointer;width:30px;height:30px;font-size:20px;line-height:30px;text-align:center;background-color:#fff;border:solid 1px #333;}
ul>li.active{background-color:red;color:#fff;}
ul>li:hover{background-color:red;color:#fff;}
</style>
</head>
<body>
<div id="container">
<ul id="floor">
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li>8F</li>
</ul>
<div id="header">PAGE HEADER</div>
<div>1樓</div>
<div>2樓</div>
<div>3樓</div>
<div>4樓</div>
<div>5樓</div>
<div>6樓</div>
<div>7樓</div>
<div>8樓</div>
<div id="footer"></div>
</div>
<script>
// 獲取所有的li和div標籤
var _lis = document.getElementById("floor").getElementsByTagName("li");
var _divs = document.getElementById("container").getElementsByTagName("div");
var _distance = 200;// 樓層上升到某個位置
// 新增滾動條事件，完成樓層出現亮燈效果
window.onscroll = function() {
// 獲取到滾動條的捲去網頁的高度
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = 0; i < _lis.length; i++) {
// 獲取樓層的offsetTop和offsetHeight進行比較
var _floorTop = _divs[i+1].offsetTop;
var _floorHeight = _divs[i+1].offsetHeight;
if(_stop + _distance >= _floorTop
&& _stop + _distance < (_floorTop + _floorHeight)) {// 當條件滿足的時候，對應的樓層亮燈
_lis[i].className = "active";
} else {
_lis[i].className = "";
}
}
}
// 新增點選事件，讓點選的樓層出現在網頁中
for(var j = 0; j < _lis.length; j++) {
_lis[j].index = j;//記錄一個編號
// 當樓層點選時
_lis[j].onclick = function() {
var _pos = _divs[this.index + 1].offsetTop;
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
if(_pos > _stop) {// 向下滾動
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 + _speed);
if(_stop1+_divs[0].offsetHeight/2 >= _pos){
clearInterval(_t1);
}
}, 1);
} else {// 向上滾動
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 - _speed);
if(_stop1 <= _pos){
clearInterval(_t1);
}
}, 1);
}
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0}
#container{width:1000px;margin:0 auto;}
#container>div{width:100%;height:500px;background-color:#ccc;font-size:120px;line-height:500px;text-align: center;color:#fff;}
#container>div:nth-of-type(2){background-color:red;}
#container>div:nth-of-type(3){background-color:blue;}
#container>div:nth-of-type(4){background-color:orange;}
#container>div:nth-of-type(5){background-color:cadetblue;}
#container>div:nth-of-type(6){background-color:pink;}
#container>div:nth-of-type(7){background-color:peru;}
#container>div:nth-of-type(8){background-color:cadetblue;}
#container>div:nth-of-type(9){background-color:black;}
#container>div#header,#container>div#footer{height:200px;}
#container>div#header{height:380px;line-height:380px;}
ul{list-style:none;position:fixed;top:280px;margin-left:-80px;}
ul>li{cursor:pointer;width:30px;height:30px;font-size:20px;line-height:30px;text-align:center;background-color:#fff;border:solid 1px #333;}
ul>li.active{background-color:red;color:#fff;}
ul>li:hover{background-color:red;color:#fff;}
</style>
</head>
<body>
<div id="container">
<ul id="floor">
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li>8F</li>
</ul>
<div id="header">PAGE HEADER</div>
<div>1樓</div>
<div>2樓</div>
<div>3樓</div>
<div>4樓</div>
<div>5樓</div>
<div>6樓</div>
<div>7樓</div>
<div>8樓</div>
<div id="footer"></div>
</div>
<script>
// 獲取所有的li和div標籤
var _lis = document.getElementById("floor").getElementsByTagName("li");
var _divs = document.getElementById("container").getElementsByTagName("div");
var _distance = 200;// 樓層上升到某個位置
// 新增滾動條事件，完成樓層出現亮燈效果
window.onscroll = function() {
// 獲取到滾動條的捲去網頁的高度
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = 0; i < _lis.length; i++) {
// 獲取樓層的offsetTop和offsetHeight進行比較
var _floorTop = _divs[i+1].offsetTop;
var _floorHeight = _divs[i+1].offsetHeight;
if(_stop + _distance >= _floorTop
&& _stop + _distance < (_floorTop + _floorHeight)) {// 當條件滿足的時候，對應的樓層亮燈
_lis[i].className = "active";
} else {
_lis[i].className = "";
}
}
}
// 新增點選事件，讓點選的樓層出現在網頁中
for(var j = 0; j < _lis.length; j++) {
_lis[j].index = j;//記錄一個編號
// 當樓層點選時
_lis[j].onclick = function() {
var _pos = _divs[this.index + 1].offsetTop;
var _stop = document.documentElement.scrollTop || document.body.scrollTop;
if(_pos > _stop) {// 向下滾動
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 + _speed);
if(_stop1+_divs[0].offsetHeight/2 >= _pos){
clearInterval(_t1);
}
}, 1);
} else {// 向上滾動
var _speed = 30;
var _t1 = setInterval(function() {
var _stop1 = document.documentElement.scrollTop || document.body.scrollTop;
window.scrollTo(0, _stop1 - _speed);
if(_stop1 <= _pos){
clearInterval(_t1);
}
}, 1);
}
}
}
</script>
</body>
</html>