JQuery實(shí)現(xiàn)電梯導(dǎo)航效果

更新時(shí)間：2022年07月22日 15:57:35 作者：aiguangyuan

這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JQuery實(shí)現(xiàn)電梯導(dǎo)航效果的具體代碼，供大家參考，具體內(nèi)容如下

分享一個(gè)基于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>愛(ài)吃</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <span>母嬰居家</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <span>圖書汽車</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <span>虛擬</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <span>還沒(méi)逛夠</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li class="last">頂部</li>
? ? ? ? </ul>
? ? </div>
? ? <div id="header">
? ? ? ? 向下滾動(dòng)鼠標(biāo)查看效果
? ? </div>
? ? <div id="main">
? ? ? ? <div class="louti" style="background: #cc0033;">
? ? ? ? ? ? 享品質(zhì)
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #999933;">
? ? ? ? ? ? 服飾美妝
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #ccff33;">
? ? ? ? ? ? 電腦數(shù)碼
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #006633;">
? ? ? ? ? ? 3C運(yùn)動(dòng)
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #6666cc;">
? ? ? ? ? ? 愛(ài)吃
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #ff6600;">
? ? ? ? ? ? 母嬰居家
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #ffff00;">
? ? ? ? ? ? 圖書汽車
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #3333ff;">
? ? ? ? ? ? 虛擬
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #ff00cc;">
? ? ? ? ? ? 還沒(méi)逛夠
? ? ? ? </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')兼容問(wèn)題body屬于chrome
? ? ? ? ? ? ? ? $('html,body').animate({
? ? ? ? ? ? ? ? ? ? scrollTop: $loutitop
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
?
? ? ? ? ? ? // 回到頂部
? ? ? ? ? ? $('.last').on('click', function () {
? ? ? ? ? ? ? ? // $('html,body')兼容問(wèn)題body屬于chrome
? ? ? ? ? ? ? ? $('html,body').animate({
? ? ? ? ? ? ? ? ? ? scrollTop: 0
? ? ? ? ? ? ? ? })
? ? ? ? ? ? });
?
? ? ? ? })
? ? </script>
</body>
?
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: