jquery實(shí)現(xiàn)樓層滾動(dòng)特效

更新時(shí)間：2022年04月14日 09:17:55 作者：coder_wb

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)樓層滾動(dòng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)樓層滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

html

<div id="floorNav">
? ? <ul>
? ? ? <li>1F<span>服飾</span></li>
? ? ? <li>2F<span>美妝</span></li>
? ? ? <li>3F<span>手機(jī)</span></li>
? ? ? <li>4F<span>家電</span></li>
? ? ? <li>5F<span>數(shù)碼</span></li>
? ? ? <li>6F<span>運(yùn)動(dòng)</span></li>
? ? ? <li>7F<span>居家</span></li>
? ? ? <li>8F<span>母嬰</span></li>
? ? ? <li>9F<span>食品</span></li>
? ? ? <li>10F<span>圖書(shū)</span></li>
? ? ? <li>11F<span>服務(wù)</span></li>
? ? </ul>
? </div>
? <div id="header"></div>
? <div id="content">
? ? <ul>
? ? ? <li style="background: #8b0000;">服飾</li>
? ? ? <li style="background: #123;">美妝</li>
? ? ? <li style="background: #667;">手機(jī)</li>
? ? ? <li style="background: #558;">家電</li>
? ? ? <li style="background: #900;">數(shù)碼</li>
? ? ? <li style="background: #456;">運(yùn)動(dòng)</li>
? ? ? <li style="background: #789;">居家</li>
? ? ? <li style="background: #234;">母嬰</li>
? ? ? <li style="background: #567;">食品</li>
? ? ? <li style="background: #887;">圖書(shū)</li>
? ? ? <li style="background: #980;">服務(wù)</li>
? ? </ul>
</div>

css

<style type="text/css">
? ? body,
? ? ul,
? ? li {
? ? ? padding: 0;
? ? ? margin: 0;
? ? }

? ? li {
? ? ? list-style: none;
? ? }

? ? #floorNav {
? ? ? display: none;
? ? ? position: fixed;
? ? ? top: 100px;
? ? ? left: 50px;
? ? ? width: 32px;
? ? ? border: 1px solid #cecece;
? ? }

? ? #floorNav li {
? ? ? position: relative;
? ? ? width: 32px;
? ? ? height: 32px;
? ? ? border-bottom: 1px solid #cecece;
? ? ? text-align: center;
? ? ? line-height: 32px;
? ? ? font-size: 12px;
? ? }

? ? #floorNav span {
? ? ? display: none;
? ? ? position: absolute;
? ? ? top: 0;
? ? ? left: 0;
? ? ? width: 32px;
? ? ? height: 32px;
? ? ? background: red;
? ? ? color: white;
? ? }

? ? #floorNav li:hover span,
? ? #floorNav li.hover span {
? ? ? display: block;
? ? ? cursor: default;
? ? }

? ? #floorNav li:last-child {
? ? ? border-bottom: none;

? ? }

? ? #header,
? ? #footer {
? ? ? width: 1000px;
? ? ? height: 1000px;
? ? ? background: darkgoldenrod;
? ? ? margin: 0 auto;
? ? }

? ? #content li {
? ? ? width: 1000px;
? ? ? height: 600px;
? ? ? margin: 0 auto;
? ? ? font-size: 40px;
? ? ? text-align: center;
? ? ? line-height: 600px;
? ? }
</style>

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
? <script type="text/javascript">
? ? $(function () {
? ? ? var flag = true;
? ? ? $(window).scroll(function () {
? ? ? ? if (flag) {
? ? ? ? ? var t = $(this).scrollTop();
? ? ? ? ? if (t > 500) {
? ? ? ? ? ? $("#floorNav").fadeIn();
? ? ? ? ? } else {
? ? ? ? ? ? $("#floorNav").fadeOut();
? ? ? ? ? }
? ? ? ? ? $("#content li").each(function () {
? ? ? ? ? ? if (t >= $(this).offset().top - $(this).outerHeight() / 2) {
? ? ? ? ? ? ? var index = $(this).index();
? ? ? ? ? ? ? $("#floorNav li")
? ? ? ? ? ? ? ? .eq(index)
? ? ? ? ? ? ? ? .addClass("hover")
? ? ? ? ? ? ? ? .siblings()
? ? ? ? ? ? ? ? .removeClass("hover");
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? }
? ? ? });

? ? ? $("#floorNav li").click(function () {
? ? ? ? flag = false;
? ? ? ? var index = $(this).index();
? ? ? ? $("html,body").animate(
? ? ? ? ? {
? ? ? ? ? ? scrollTop: $("#content li").eq(index).offset().top,
? ? ? ? ? },
? ? ? ? ? () => {
? ? ? ? ? ? flag = true;
? ? ? ? ? }
? ? ? ? );
? ? ? ? $(this).addClass("hover").siblings().removeClass("hover");
? ? ? });
? ? });
</script>

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

您可能感興趣的文章: