JavaScript實(shí)現(xiàn)樓梯滾動(dòng)特效(jQuery實(shí)現(xiàn))
想必大家都用過(guò)JD,在它的首頁(yè)里面有個(gè)很常見(jiàn)的特性:就是 樓梯特效 。
對(duì)于程序員的我們,可以說(shuō)是萬(wàn)物皆可盤。那么,我們就來(lái)盤一下它。
先上要實(shí)現(xiàn)的效果圖:
效果功能描述:當(dāng)點(diǎn)擊右側(cè)懸浮的按鈕時(shí),點(diǎn)擊相應(yīng)模塊,左側(cè)內(nèi)容區(qū)域會(huì)自動(dòng)跳轉(zhuǎn)到該模塊區(qū)域。
下面,上代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } li{ list-style-type: none; } .top{ height:900px; background : #ddd; } .footer{ height : 600px; background : #ddd; } .content{ height:800px; } .content h1{ text-align:center; line-height: 80px; } .stairs-list{ width : 60px; position: fixed; right:5%; top:50%; margin-top:-120px; background : #fff; } .stairs-list li{ width:50px; height:50px; line-height: 25px; text-align : center; padding:5px; border-bottom:1px solid #ddd; } .stairs-list li.active{ color : orangered; } .stairs li span{ display: block; } </style> </head> <body> <div class="top"> </div> <div class="content" style="background-color : yellowgreen "> <h1>京東秒殺</h1> </div> <div class="content" style="background-color : skyblue "> <h1>特色優(yōu)選</h1> </div> <div class="content" style="background-color : #666 "> <h1>頻道廣場(chǎng)</h1> </div> <div class="content" style="background-color : orangered "> <h1>為您推薦</h1> </div> <div class="footer"></div> <ul class="stairs-list"> <li> <span>京東</span> <span>秒殺</span> </li> <li> <span>特色</span> <span>優(yōu)選</span> </li> <li> <span>頻道</span> <span>廣場(chǎng)</span> </li> <li> <span>為您</span> <span>推薦</span> </li> </ul> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> // OOA : // 1. 初始化數(shù)據(jù); // 2. 事件綁定; // 3. 根據(jù)scrollTop值判定所在樓層; // 4. 效果添加; // 5. 根據(jù)點(diǎn)擊事件切換下標(biāo); function Stairs( options ){ this.options = options; this.init(); } Stairs.prototype = { constructor : Stairs, init : function(){ // 內(nèi)容元素高度數(shù)組; this.content_ele_offset_top_list = []; // 獲取元素的偏移高度; $(this.options.content_selector).offset( function( index , coords) { // 將每一個(gè)元素的高度值放入高度列表之中; this.content_ele_offset_top_list.push(coords.top); return coords; }.bind(this)) // 獲取最小高度值; var _length = this.content_ele_offset_top_list.length ; this.min_top = this.content_ele_offset_top_list[0]; this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height(); this.content_ele_offset_top_list.push(this.max_top); this.bindEvent(); }, bindEvent:function(){ var $body_html = $("body,html"); // 保存實(shí)例對(duì)象的指針; // var _this = this; var instance = this; // 高頻執(zhí)行的scroll事件; // 優(yōu)化 : 節(jié)流 ; $(document).scroll( function(){ var scrollTop = $body_html.scrollTop(); this.calStairsIndex(scrollTop); }.bind(this)) $(this.options.stairs_selector).click(function(){ // 知道當(dāng)前發(fā)生事件的元素是誰(shuí); this; 因?yàn)檫@jQuery事件綁定處理沒(méi)有辦法,在外部傳入當(dāng)前發(fā)生事件的元素; 這個(gè)this不能變; // 當(dāng)前的實(shí)例對(duì)象是誰(shuí); this; var index = $(this).index(instance.options.stairs_selector); instance.changeScrollTop(index); }) }, // 計(jì)算當(dāng)前樓層; calStairsIndex : function( st ){ // 沒(méi)有到達(dá)樓梯區(qū)域進(jìn)行隔離; if(st < this.min_top || st > this.max_top){ // console.log(-1); this.index = -1; this.changeStairsBtn(); return false }; // 如果還在范圍之內(nèi)不用繼續(xù)判斷; var _list = this.content_ele_offset_top_list; // 如果 st 還在當(dāng)前index 范圍之內(nèi)則不繼續(xù)進(jìn)行查找; if(st >= _list[this.index] && st < _list[this.index + 1]){ return false; } // 遍歷 ; for(var i = 0 ; i < _list.length ; i ++){ if(st >= _list[i] && st < _list[i + 1]){ this.index = i; break; } } this.changeStairsBtn(); }, changeStairsBtn : function(){ if(this.index === -1){ $(this.options.stairs_selector).removeClass("active"); return false; } $(this.options.stairs_selector).eq(this.index).addClass("active") .siblings() .removeClass("active"); }, changeScrollTop : function( index ){ $("body,html").scrollTop(this.content_ele_offset_top_list[index]); // 事件觸發(fā)器; $(document).trigger("scroll"); } } var staris = new Stairs({ content_selector : ".content", stairs_selector : ".stairs-list li" }); console.log(staris); </script> </body> </html>
現(xiàn)在,我們也能實(shí)現(xiàn)跟它一樣的功能效果了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery.jsPlumb實(shí)現(xiàn)拓?fù)鋱D
- JavaScript/jQuery實(shí)現(xiàn)切換頁(yè)面效果
- ajax在js中和jQuery中的用法實(shí)例詳解
- js實(shí)現(xiàn)七夕表白彈幕效果 jQuery實(shí)現(xiàn)彈幕技術(shù)
- JavaScript與JQuery框架基礎(chǔ)入門教程
- JS實(shí)現(xiàn)jQuery的append功能
- jQuery是用來(lái)干什么的 jquery其實(shí)就是一個(gè)js框架
- JavaScript中通用的jquery動(dòng)畫(huà)滾屏實(shí)例
相關(guān)文章
JS循環(huán)中正確使用async、await的姿勢(shì)分享
async?/?await是ES7的重要特性之一,也是目前社區(qū)里公認(rèn)的優(yōu)秀異步解決方案,下面這篇文章主要給大家介紹了關(guān)于JS循環(huán)中正確使用async、await的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12JavaScript中的object轉(zhuǎn)換函數(shù)toString()與valueOf()介紹
這篇文章主要介紹了JavaScript中的object轉(zhuǎn)換函數(shù)toString()與valueOf()介紹,需要的朋友可以參考下2014-12-12js計(jì)算字符串長(zhǎng)度包含的中文是utf8格式
使用js寫(xiě)的計(jì)算字符串長(zhǎng)度且其中中文是utf8格式的,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-10-10