日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

JQuery實現電梯導航效果_jquery

作者：aiguangyuan ? 更新時間： 2022-09-16 編程語言

本文實例為大家分享了JQuery實現電梯導航效果的具體代碼，供大家參考，具體內容如下

分享一個基于JQuery實現的電梯導航效果，效果如下：?

以下是代碼實現：

<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="utf-8" />
? ? <title>基于JQuery實現電梯導航特效</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>享品質</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <span>服飾美妝</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <span>電腦數碼</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <span>3C運動</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">
? ? ? ? 向下滾動鼠標查看效果
? ? </div>
? ? <div id="main">
? ? ? ? <div class="louti" style="background: #cc0033;">
? ? ? ? ? ? 享品質
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #999933;">
? ? ? ? ? ? 服飾美妝
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #ccff33;">
? ? ? ? ? ? 電腦數碼
? ? ? ? </div>
? ? ? ? <div class="louti" style="background: #006633;">
? ? ? ? ? ? 3C運動
? ? ? ? </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">
? ? ? ? 網站底部
? ? </div>
? ? <script src="js/jquery-1.8.3.min.js"></script>
? ? <script>
? ? ? ? $(function () {
? ? ? ? ? ? $(window).on('scroll', function () {
? ? ? ? ? ? ? ? var $scroll = $(this).scrollTop();
? ? ? ? ? ? ? ? // 顯示樓層標簽
? ? ? ? ? ? ? ? if ($scroll >= 800) {
? ? ? ? ? ? ? ? ? ? $('#loutinav').show();
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? $('#loutinav').hide();
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? // 拖動滾輪，點亮對應的樓層標簽
? ? ? ? ? ? ? ? $('.louti').each(function () {
? ? ? ? ? ? ? ? ? ? var $loutitop = $('.louti').eq($(this).index()).offset().top + 400;
? ? ? ? ? ? ? ? ? ? // 樓層的top大于滾動條的距離
? ? ? ? ? ? ? ? ? ? if ($loutitop > $scroll) {
? ? ? ? ? ? ? ? ? ? ? ? $('#loutinav li').removeClass('active');
? ? ? ? ? ? ? ? ? ? ? ? $('#loutinav li').eq($(this).index()).addClass('active');
? ? ? ? ? ? ? ? ? ? ? ? // 中斷循環
? ? ? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? });
?
? ? ? ? ? ? // 獲取每個樓梯的offset().top,點擊樓層讓對應的內容模塊移動到對應的位置 ?
? ? ? ? ? ? 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;
? ? ? ? ? ? ? ? // 獲取每個樓梯的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>

原文鏈接：https://blog.csdn.net/weixin_40629244/article/details/98680045

欄目分類
最近更新