欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果

 更新時(shí)間：2022年02月22日 16:49:00   作者：smile-linlin001  
這篇文章主要為大家詳細(xì)介紹了使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一般來(lái)說(shuō)，一些大型的電商網(wǎng)站首頁(yè)，頁(yè)面內(nèi)容很多，頁(yè)面會(huì)很長(zhǎng)，這時(shí)候大部分網(wǎng)站都選擇使用電梯導(dǎo)航，使頁(yè)面跳轉(zhuǎn)到相應(yīng)位置或者返回頂部。

下面使用jquery庫(kù)來(lái)實(shí)現(xiàn)電梯導(dǎo)航

基本思路

電梯導(dǎo)航基本上就是使用元素距離頁(yè)面頭部的高度offsetTop和頁(yè)面滾動(dòng)的距離scrollTop來(lái)進(jìn)行比較事項(xiàng)相應(yīng)的效果。

1、頁(yè)面滾動(dòng)到相應(yīng)的位置，實(shí)現(xiàn)電梯導(dǎo)航的顯示與隱藏
2、頁(yè)面滾動(dòng)到相應(yīng)的位置，電梯導(dǎo)航的按鈕添加或者移出相應(yīng)的類
3、點(diǎn)擊電梯導(dǎo)航按鈕，實(shí)現(xiàn)頁(yè)面的滾動(dòng)和為按鈕添加或者移出相應(yīng)的類
4、點(diǎn)擊頂部按鈕，返回頂部

代碼實(shí)現(xiàn)

html代碼

<div class="header">頭部</div>
<div class="banner">焦點(diǎn)圖</div>
? ? <div class="content">
? ? ? ? <div class="qinzi w">親子</div>
? ? ? ? <div class="liren w">麗人</div>
? ? ? ? <div class="xuexi w">學(xué)習(xí)</div>
? ? ? ? <div class="lvyou w">旅游</div>
? ? ? ? <div class="zhusu w">住宿</div>
? ? ? ? <div class="meishi w">美食</div>
? ? </div>
? ? <div class="footer">尾部</div>

? ? <!-- 電梯導(dǎo)航 -->
? ? <div class="floor" style="display: none;">
? ? ? ? <ul>
? ? ? ? ? ? <li>親子</li>
? ? ? ? ? ? <li>麗人</li>
? ? ? ? ? ? <li>學(xué)習(xí)</li>
? ? ? ? ? ? <li>旅游</li>
? ? ? ? ? ? <li>住宿</li>
? ? ? ? ? ? <li>美食</li>
? ? ? ? </ul>
? ? ? ? <span>頂部</span>
</div>?

css代碼

?*{
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? font-size: 30px;
? ? ? ? }

? ? ? ? .header {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }

? ? ? ? .banner {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color: skyblue;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }

? ? ? ? .footer {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: darkolivegreen;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }

? ? ? ? .content {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? .content .qinzi {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 324px;
? ? ? ? ? ? background-color: rosybrown;
? ? ? ? }

? ? ? ? .content .liren {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 304px;
? ? ? ? ? ? background-color: slategrey;
? ? ? ? }

? ? ? ? .content .xuexi {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: khaki;
? ? ? ? }

? ? ? ? .content .lvyou {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: greenyellow;
? ? ? ? }

? ? ? ? .content .zhusu {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: darkcyan;
? ? ? ? }

? ? ? ? .content .meishi {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: lightgreen;
? ? ? ? }

? ? ? ? .floor {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? top: 150px;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? margin-left: -620px;
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? text-align: center;
? ? ? ? }

? ? ? ? .floor li {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: grey;
? ? ? ? ? ? margin-bottom: 5px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? span {
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: grey;
? ? ? ? ? ? margin-bottom: 5px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .floor .current {
? ? ? ? ? ? background-color: hotpink;
? ? ? ? }

JavaScript代碼

var flag = true; ?//使用節(jié)流閥
? ? ? ? //頁(yè)面剛開(kāi)始隱藏，當(dāng)頁(yè)面滾動(dòng)到content的時(shí)候，電梯導(dǎo)航顯示
? ? ? ? $(function () {
? ? ? ? ? ? //頁(yè)面刷新時(shí)調(diào)用一次
? ? ? ? ? ? //封裝函數(shù)，切換顯示與隱藏
? ? ? ? ? ? var contentTop = $(".content").offset().top;
? ? ? ? ? ? toggleTool();
? ? ? ? ? ? function toggleTool() {
? ? ? ? ? ? ? ? if ($(document).scrollTop() >= contentTop) {
? ? ? ? ? ? ? ? ? ? $(".floor").fadeIn();

? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? $(".floor").fadeOut();
? ? ? ? ? ? ? ? }

? ? ? ? ? ? }
? ? ? ? ? ? $(window).scroll(function () {
? ? ? ? ? ? ? ? toggleTool()
? ? ? ? ? ? ? ? //頁(yè)面滾動(dòng)到相應(yīng)位置，電梯導(dǎo)航按鈕添加current類
? ? ? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? ? ? $('.content .w').each(function (i, ele) {
? ? ? ? ? ? ? ? ? ? ? ? var cuHeight = ele.offsetHeight / 2;
? ? ? ? ? ? ? ? ? ? ? ? if ($(document).scrollTop() >= $(ele).offset().top - cuHeight) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? $('.floor li').eq(i).addClass('current').siblings().removeClass();

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? ? ? //點(diǎn)擊電梯導(dǎo)航按鈕，頁(yè)面跳轉(zhuǎn)到相應(yīng)位置，使用jquery里面的animate
? ? ? ? ? ? $('.floor li ').click(function () {
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? $(this).addClass('current').siblings().removeClass();
? ? ? ? ? ? ? ? var index = $(this).index();
? ? ? ? ? ? ? ? var current = $('.content .w').eq(index).offset().top;
? ? ? ? ? ? ? ? $('html,body').stop().animate({
? ? ? ? ? ? ? ? ? ? scrollTop: current
? ? ? ? ? ? ? ? }, function () {
? ? ? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? ? ? $('.floor span').click(function () {
? ? ? ? ? ? ? ? $(this).addClass('current');
? ? ? ? ? ? ? ? $('html,body').stop().animate({
? ? ? ? ? ? ? ? ? ? scrollTop: 0
? ? ? ? ? ? ? ? })
? ? ? })
})

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

相關(guān)文章

最新評(píng)論