js實現(xiàn)電梯導(dǎo)航效果的示例代碼
更新時間：2023年12月11日 14:05:56 作者：LxyingINGing
這篇文章主要介紹了JavaScript實現(xiàn)電梯導(dǎo)航效果的相關(guān)知識,文中通過示例代碼介紹的很詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
頁面往下滑動到一定距離時，電梯導(dǎo)航顯示，且與內(nèi)容板塊相呼應(yīng)。使用了選項卡的功能，采用排他思想等實現(xiàn)。效果如下圖所示：
代碼：
封裝函數(shù) move.js: 可直接調(diào)用，無需修改
function move(obj, target, callback) {
clearInterval(obj.timer); // 清除之前的定時器
obj.timer = setInterval(function () {
var header = window.scrollY;
var distance = target - header;
var speed = distance / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (Math.abs(distance) <= Math.abs(speed)) { // 修改停止動畫的條件
console.log('aaa');
clearInterval(obj.timer); // 清除定時器
window.scrollTo(0, target); // 確保滾動到目標(biāo)位置
callback && callback();
} else {
window.scrollTo(0, header + speed);
}
}, 15);
}詳細(xì)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.header {
width: 1200px;
height: 1000px;
background-color: aqua;
margin: 0 auto;
}
.floor1 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 0, 1);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor2 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 0, 0.8);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor3 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 0, 0.6);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor4 {
width: 1200px;
height: 700px;
background-color: rgba(255, 255, 0, 1);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor5 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 255, 1);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor6 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 0, 1);
margin: 0 auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor7 {
width: 1200px;
height: 700px;
background-color: rgba(255, 255, 0, 1);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor8 {
width: 1200px;
height: 700px;
background-color: rgba(255, 210, 0, 1);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor9 {
width: 1200px;
height: 700px;
background-color: rgba(255, 255, 0, 1);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor10 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 255, 1);
margin: 10px auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.floor11 {
width: 1200px;
height: 700px;
background-color: rgba(255, 0, 0, 1);
margin: 0 auto;
font-size: 30px;
text-align: center;
line-height: 700px;
}
.footer {
width: 1200px;
height: 800px;
background-color: rgba(0, 0, 0, 1);
margin: 10px auto;
}
.elevator {
width: 44px;
height: auto;
background: #e9e6e6;
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%);
/* z-index: 999; */
margin: -266.5px 640px 0 0;
margin-left: -650px;
padding-bottom: 4px;
display: none;
}
.elevator ul li {
font-size: 12px;
width: 28px;
height: 29px;
padding: 4px;
color: #fff;
text-align: center;
margin: 4px 4px 0 4px;
cursor: pointer;
background: #655f61;
line-height: 14px;
}
.elevator ul li:nth-child(1) {
line-height: 29px;
background: #ff1a66;
}
.elevator ul li:last-child {
line-height: 29px;
background: #acacac;
}
.elevator ul li:hover {
background: #f69;
}
.elevator ul li.active {
background: #f69;
}
.elevator ul li.r_active {
background: #666;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="floor1 f">黃金鉑金</div>
<div class="floor2 f">投資金銀</div>
<div class="floor3 f">鉆石</div>
<div class="floor4 f">銀飾</div>
<div class="floor5 f">彩色寶石</div>
<div class="floor6 f">翡翠玉石</div>
<div class="floor7 f">珍珠</div>
<div class="floor8 f">流行飾品</div>
<div class="floor9 f">天然木飾</div>
<div class="floor10 f">奇趣收藏</div>
<div class="floor11 f">眼鏡手表</div>
<div class="footer"></div>
<div class="elevator">
<ul>
<li>導(dǎo)航</li>
<li class="item active">黃金鉑金</li>
<li class="item">投資金銀</li>
<li class="item">鉆石</li>
<li class="item">銀飾</li>
<li class="item">彩色寶石</li>
<li class="item">翡翠玉石</li>
<li class="item">珍珠</li>
<li class="item">流行飾品</li>
<li class="item">天然木飾</li>
<li class="item">奇趣收藏</li>
<li class="item">眼鏡手表</li>
<li class="backtop"><a href="#" rel="external nofollow" ></a>頂部</li>
</ul>
</div>
<script src="./js/move.js"></script>
<script>
(function () {
//查節(jié)點對象
var floor1 = document.querySelector('.floor1');
var elevator = document.querySelector('.elevator');
var items = document.querySelectorAll('.elevator li.item');
var fs = document.querySelectorAll('.f');
var backTop = document.querySelector('.elevator li.backtop');
var footer=document.querySelector('.footer');
//1.頁面滾動時電梯導(dǎo)航的顯示與隱藏效果
load();
function load() {
//頁面卷進(jìn)去的距離
var disY = document.documentElement.scrollTop;
//第一個樓層與頁面頂部的距離
var dis = floor1.offsetTop - 200;
if (disY >= dis) {
elevator.style.display = "block";
} else {
elevator.style.display = "none";
}
//4.交互，相應(yīng)li對應(yīng)相應(yīng)樓層
for (var i = 0; i < fs.length; i++) {
var fs_D_top = fs[i].offsetTop-100;
if (disY >= fs_D_top) {
document.querySelector('.elevator li.active').classList.remove('active');
items[i].classList.add('active');
}
//到最后一個樓層不再繼續(xù)往下變顏色
if(disY>footer.offsetTop){
document.querySelector('.elevator li.active').classList.add('r_active');
}else{
document.querySelector('.elevator li.active').classList.remove('r_active');
}
}
}
//頁面滑動
window.onscroll = function () {
load();
}
//2.選項卡
//單擊小li切換到對應(yīng)頁面
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
document.querySelector('.elevator li.active').classList.remove('active');
this.classList.add('active');
//呼應(yīng)內(nèi)容區(qū)
move(window, fs[i].offsetTop)
}
}
//3.返回頂部
backTop.onclick = function () {
move(window, 0);
}
})();
</script>
</body>
</html>到此這篇關(guān)于js實現(xiàn)電梯導(dǎo)航效果的示例代碼的文章就介紹到這了,更多相關(guān)js電梯導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js判斷文本框剩余可輸入字?jǐn)?shù)的方法,可實現(xiàn)直觀顯示文本框可輸入字?jǐn)?shù)的功能,非常具有實用價值,需要的朋友可以參考下2015-02-02
Base64編碼加密JS代碼網(wǎng)頁版，在文本框中輸入任意字符串，即可將該字符串按Base64編碼進(jìn)行加密，也可將任意Base64編碼的字符解密顯示正常值2013-03-03
ES6已經(jīng)不再是JavaScript最新的標(biāo)準(zhǔn)，但是它已經(jīng)廣泛用于編程實踐中。下面通過本文給大家分享前端開發(fā)不得不知的10個最佳ES6特性，感興趣的朋友參考下吧2017-08-08
這篇文章主要介紹了JS實現(xiàn)的幻燈片切換顯示效果,涉及javascript通過擴(kuò)展實現(xiàn)針對頁面元素的動態(tài)切換操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
不加分號其實體現(xiàn)的是對javascript的深入理解。最后一個分號是因為無法判斷后引入的js文件內(nèi)容會不會對本文檔產(chǎn)生影響；return多數(shù)是要加分號的,2015-05-05
前端開發(fā)中常見的數(shù)據(jù)結(jié)構(gòu)優(yōu)化問題與解決
在實際前端開發(fā)中,后端返回的數(shù)據(jù)結(jié)構(gòu)往往不能直接滿足前端展示或業(yè)務(wù)邏輯的需求,需要進(jìn)行各種優(yōu)化處理,下面我們來看看常見的幾個優(yōu)化問題及解決方案吧2025-04-04
這篇文章主要給大家介紹了使用JS如何制作簡單的ASCII圖與單極圖的相關(guān)資料，文中介紹的非常詳細(xì)，并在文末給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
three.js中文文檔學(xué)習(xí)之通過模塊導(dǎo)入
這篇文章主要給大家介紹了關(guān)于three.js中文文檔學(xué)習(xí)之通過模塊導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
javascript中slice(),splice(),split(),substring(),substr()使用方法
這篇文章主要介紹了javascript中slice(),splice(),split(),substring(),substr()使用方法,需要的朋友可以參考下2015-03-03