溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“JQuery怎么實(shí)現(xiàn)電梯導(dǎo)航特效”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“JQuery怎么實(shí)現(xiàn)電梯導(dǎo)航特效”文章吧。
效果如下：
以下是代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>基于JQuery實(shí)現(xiàn)電梯導(dǎo)航特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'microsoft yahei';
}
#loutinav {
width: 35px;
position: fixed;
top: 100px;
left: 50px;
border: 1px solid #ddd;
display: none;
}
#loutinav ul li {
width: 35px;
height: 32px;
border-bottom: 1px dotted #DDDDDD;
list-style: none;
font-size: 12px;
text-align: center;
position: relative;
cursor: pointer;
padding: 10px 0;
background: #918888;
color: #fff;
}
#loutinav ul li span {
width: 35px;
height: 32px;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
}
#loutinav ul li.last {
background: #5e4a4a;
color: #fff;
border-bottom: 1px solid #ddd;
}
#loutinav ul li.active span {
background: #c00;
color: #fff;
display: block;
}
#loutinav ul li:hover span {
background: #c00;
color: #fff;
display: block;
}
#header {
width: 1000px;
height: 1000px;
background: #cc6633;
margin: 0 auto;
font-size: 50px;
line-height: 1000px;
text-align: center;
color: #000;
}
#main {
width: 1000px;
background: #66ff66;
margin: 0 auto;
}
#main .louti {
height: 600px;
width: 1000px;
font-size: 50px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 600px;
}
#footer {
width: 1000px;
height: 400px;
background: red;
margin: 0 auto;
font-size: 50px;
line-height: 400px;
text-align: center;
color: #000;
}
</style>
</head>
<body>
<div id="loutinav">
<ul>
<li class="active">
<span>享品質(zhì)</span>
</li>
<li>
<span>服飾美妝</span>
</li>
<li>
<span>電腦數(shù)碼</span>
</li>
<li>
<span>3C運(yùn)動(dòng)</span>
</li>
<li>
<span>愛吃</span>
</li>
<li>
<span>母嬰居家</span>
</li>
<li>
<span>圖書汽車</span>
</li>
<li>
<span>虛擬</span>
</li>
<li>
<span>還沒逛夠</span>
</li>
<li class="last">頂部</li>
</ul>
</div>
<div id="header">
向下滾動(dòng)鼠標(biāo)查看效果
</div>
<div id="main">
<div class="louti" >
享品質(zhì)
</div>
<div class="louti" >
服飾美妝
</div>
<div class="louti" >
電腦數(shù)碼
</div>
<div class="louti" >
3C運(yùn)動(dòng)
</div>
<div class="louti" >
愛吃
</div>
<div class="louti" >
母嬰居家
</div>
<div class="louti" >
圖書汽車
</div>
<div class="louti" >
虛擬
</div>
<div class="louti" >
還沒逛夠
</div>
</div>
<div id="footer">
網(wǎng)站底部
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
$(window).on('scroll', function () {
var $scroll = $(this).scrollTop();
// 顯示樓層標(biāo)簽
if ($scroll >= 800) {
$('#loutinav').show();
} else {
$('#loutinav').hide();
}
// 拖動(dòng)滾輪，點(diǎn)亮對(duì)應(yīng)的樓層標(biāo)簽
$('.louti').each(function () {
var $loutitop = $('.louti').eq($(this).index()).offset().top + 400;
// 樓層的top大于滾動(dòng)條的距離
if ($loutitop > $scroll) {
$('#loutinav li').removeClass('active');
$('#loutinav li').eq($(this).index()).addClass('active');
// 中斷循環(huán)
return false;
}
});
});
// 獲取每個(gè)樓梯的offset().top,點(diǎn)擊樓層讓對(duì)應(yīng)的內(nèi)容模塊移動(dòng)到對(duì)應(yīng)的位置
var $loutili = $('#loutinav li').not('.last');
$loutili.on('click', function () {
$(this).addClass('active').siblings('li').removeClass('active');
var $loutitop = $('.louti').eq($(this).index()).offset().top;
// 獲取每個(gè)樓梯的offsetTop值
// $('html,body')兼容問題body屬于chrome
$('html,body').animate({
scrollTop: $loutitop
})
});
// 回到頂部
$('.last').on('click', function () {
// $('html,body')兼容問題body屬于chrome
$('html,body').animate({
scrollTop: 0
})
});
})
</script>
</body>
</html>以上就是關(guān)于“JQuery怎么實(shí)現(xiàn)電梯導(dǎo)航特效”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼