JQuery實(shí)現(xiàn)電梯導(dǎo)航特效
更新時(shí)間：2022年02月22日 16:32:48 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文分享一個(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>愛吃</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" 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;">
? ? ? ? ? ? 愛吃
? ? ? ? </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;">
? ? ? ? ? ? 還沒逛夠
? ? ? ? </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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框?qū)崙?zhàn)（5）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
本文主要介紹了使用jQuery快速高效制作網(wǎng)頁(yè)交互特效的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
手機(jī)移動(dòng)端實(shí)現(xiàn) jquery和HTML5 Canvas的幸運(yùn)大獎(jiǎng)盤特效
這篇文章主要介紹了手機(jī)移動(dòng)端實(shí)現(xiàn) jquery和HTML5 Canvas的幸運(yùn)大獎(jiǎng)盤特效的相關(guān)資料,這里附有實(shí)現(xiàn)代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
Jquery 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實(shí)現(xiàn)代碼，大家可以具體的看下面的說明。2009-07-07
JQuery魔力之$("tagName")與selector
DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$(“tagName”)這么簡(jiǎn)單！tag標(biāo)簽（可以是：p、div、button …）標(biāo)簽本身具有ID、Class等屬性2012-03-03
jQuery實(shí)現(xiàn)點(diǎn)擊標(biāo)題輸入詳細(xì)信息
點(diǎn)擊標(biāo)題，輸入詳細(xì)信息，點(diǎn)擊確定按鈕，完成，把不必要的選項(xiàng)隱藏，當(dāng)用戶真正有需要的時(shí)候，在顯示出來2013-04-04
這篇文章主要介紹了jQuery?編程之jQuery?屬性選擇器，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
真正的JQuery.ajax傳遞中文參數(shù)的解決方法
許多人在使用JQuery.ajax方法時(shí)肯定會(huì)遇到一個(gè)問題。在編碼不是UTF-8的時(shí)候，當(dāng)傳遞的參數(shù)里有中文的時(shí)候，服務(wù)端Request的時(shí)候都會(huì)出現(xiàn)亂碼。2011-05-05
Jquery 數(shù)組操作大全個(gè)人總結(jié)
jQuery的數(shù)組處理,便捷,功能齊全. 最近的項(xiàng)目中用到的比較多，最近時(shí)間緊迫,今天抽了些時(shí)間回過頭來看 jQuery中文文檔順便對(duì)jQuery數(shù)組做個(gè)總結(jié)2013-11-11
BootStrap下jQuery自動(dòng)完成的樣式調(diào)整
這篇文章主要介紹了BootStrap下jQuery自動(dòng)完成的樣式調(diào)整的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05