jquery實(shí)現(xiàn)樓層滾動(dòng)特效
本文實(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>圖書</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;">圖書</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>
js
<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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的,只能供大家選擇,今天小編給大家分享基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載,需要的朋友參考下2016-02-02jQuery使用each方法與for語句遍歷數(shù)組示例
這篇文章主要介紹了jQuery使用each方法與for語句遍歷數(shù)組,結(jié)合實(shí)例形式簡(jiǎn)單對(duì)比分析了兩種方法在遍歷數(shù)組時(shí)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06Jquery網(wǎng)頁出現(xiàn)的亂碼問題的三種解決方法
很多時(shí)候,在網(wǎng)上下的一些Jquery插件,在頁面運(yùn)行時(shí)出現(xiàn)亂碼問題,我總結(jié)了三點(diǎn),希望對(duì)大家有所幫助:2013-06-06利用jquery實(shí)現(xiàn)實(shí)時(shí)更新歌詞的方法
這篇文章主要給大家介紹了如何利用jquery實(shí)現(xiàn)實(shí)時(shí)更新歌詞的方法,文中給出了詳細(xì)的實(shí)現(xiàn)思路和示例代碼,對(duì)大家的參考借鑒具有一定的價(jià)值,有需要的朋友下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動(dòng)實(shí)現(xiàn)代碼
Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動(dòng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入特效
這里給大家分享的是使用jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入的特效,效果相當(dāng)棒,后面附上瀑布流的實(shí)現(xiàn)思路和關(guān)鍵代碼,有需要的小伙伴可以參考下。2015-08-08