課程
/前端開發(fā)
/jQuery
/jQuery實現(xiàn)自定義滾動條
這介個的源碼有嗎,很多地方法沒有太明白!!!
2016-11-19
源自:jQuery實現(xiàn)自定義滾動條 4-1
正在回答
https://github.com/liuzhaoxu1996/slider-plugin
第一個排版亂了,js代碼可以貼后面的。
var?Scroll?=?{}; (function?(win,doc,$)?{ function?CusScrollBar(options)?{ if?(this?instanceof?CusScrollBar)?{ this.init(options); }?else?{ return?CusScrollBar(options); } } $.extend(CusScrollBar.prototype,?{ init:?function?(options)?{ var?_this?=?this; _this.options?=?{ scrollDirection:?"y", contentSelector:?"", barSelector:?"", sliderSelector:?"", tabItemSelector:?".item", tabActive:?"active", anchorSelector:?".anchor", correctSelector:?".correct-bot", articleSelector:?".article-text", wheelStep:?10 } $.extend(true,_this.options,?options?||?{}); _this.initEvent(); return?_this; }, initEvent:?function?()?{ var?opts?=?this.options; this.cont?=?$(opts.contentSelector); this.slider?=?$(opts.sliderSelector); this.bar?=?opts.barSelector???$(opts.barSelector)?:?_this.slider.parent(); this.tabItem?=?$(opts.tabItemSelector); this.anchor?=?$(opts.anchorSelector); this.correct?=?$(opts.correctSelector); this.article?=?$(opts.articleSelector); this.doc?=?$(doc); this.initSliderDrag().bindContentScroll().bindMouseWheel().initTabEvent().initArticleHeight(); }, initTabEvent:?function?()?{?//?監(jiān)聽標簽事件 var?_this?=?this; this.tabItem.on("click",function?(e)?{ e.preventDefault(); var?index?=?$(this).index(); _this.changeTabSelect(index);?//?標簽切換 _this.scrollTo(_this.cont[0].scrollTop?+?_this.getAnchorPosition(index));?//?內(nèi)容跳轉(zhuǎn)到錨點 }) return?_this; }, initArticleHeight:?function?()?{ var?_this?=?this, lastArticle?=?this.article.last(), lastArticleHeight?=?lastArticle.height(), contentHeight?=?_this.cont.height(); if?(lastArticleHeight?<?contentHeight)?{ _this.correct[0].style.height?=?contentHeight?-?lastArticleHeight?-?_this.anchor.outerHeight()?+?"px"; } return?_this; }, initSliderDrag:?function?()?{?//?滑塊拖動功能 var?_this?=?this, slider?=?this.slider, ????sliderEl?=?slider[0]; if?(sliderEl)?{ var?doc?=?this.doc, ????dragStartPagePosition, ????dragStartScrollPosition, ????dragContBarRate; function?fnMove(e)?{ e.preventDefault(); if?(dragStartPagePosition?==?null)?{ return; } //?內(nèi)容滑動距離?=?滑塊移動距離?*?比率?+?內(nèi)容開始卷曲的高度 //?滑塊移動距離?=?鼠標釋放的位置?-?鼠標開始的位置 var?scrollRange?=?dragStartScrollPosition?+?(e.pageY?-?dragStartPagePosition)?*?dragContBarRate; _this.scrollTo(scrollRange); } slider.on("mousedown",function?(e)?{ e.preventDefault(); dragStartPagePosition?=?e.pageY; dragStartScrollPosition?=?_this.cont[0].scrollTop; dragContBarRate?=?_this.getMaxScrollRange()?/?_this.getMaxSliderRange();?//?滾動比率?=?內(nèi)容可滾動高度?/?滑塊可移動距離 doc.on("mousemove.scroll",function?(e)?{ fnMove(e) }).on("mouseup.scroll",function?()?{ doc.off("mousemove.scroll?mouseup.scroll"); }); }); return?_this; } }, changeTabSelect:?function?(index)?{?//?標簽切換時變更自身元素和同胞元素的類名 var?_this?=?this, active?=?_this.options.tabActive; return?_this.tabItem.eq(index).addClass(active).siblings().removeClass(active); }, getAnchorPosition:?function?(index)?{?//?指定的錨點相對于可視區(qū)位置 var?result?=?this.anchor.eq(index).position().top; return?result; }, getAllAnchorPosition:?function?()?{?//?獲得所有錨點位置 var?_this?=?this, arrPosition?=?[]; //?正序開始 for?(var?i?=?0;?i?<?_this.anchor.length;?i++)?{ arrPosition.push(_this.cont[0].scrollTop?+?_this.getAnchorPosition(i)); } return?arrPosition; }, bindContentScroll:?function?()?{?//?監(jiān)聽內(nèi)容滾動,同步滑塊位置 var?_this?=?this; _this.cont.on("scroll",function?()?{ var?sliderEl?=?_this.slider?&&?_this.slider[0];?//?如果兩個都為object對象就返回第二個對象(第一個為jquery對象,第二個為DOM對象) if?(sliderEl)?{ sliderEl.style.top?=?_this.getSliderPosition()?+?"px"; } }) return?_this; }, getSliderPosition:?function?()?{?//?計算滑塊當前位置 var?_this?=?this, maxSliderPosition?=?_this.getMaxSliderRange(); //?滑塊移動距離?=?滑塊可移動距離?*?內(nèi)容滾動高度?/?內(nèi)容可滾動高度 var?result?=?Math.min(maxSliderPosition,?maxSliderPosition?*?_this.cont[0].scrollTop?/?_this.getMaxScrollRange()); return?result; }, bindMouseWheel:?function?()?{?//?鼠標滾輪事件程序 var?_this?=?this; //?chrome支持mousewheel?屬性取值120的倍數(shù)?正值表示向上 //?Firefox支持DOMMouseScroll?屬性取值3的倍數(shù)?負值表示向上 _this.cont.on("mousewheel?DOMMouseScroll",function?(e)?{ e.preventDefault(); //?$.event.originalEvent?指向原生事件 var?oEV?=?e.originalEvent, wheelRange?=?oEV.wheelDelta???-oEV.wheelDelta?/?120?:?(oEV.detail?||?0)?/?3; _this.scrollTo(_this.cont[0].scrollTop?+?wheelRange?*?_this.options.wheelStep); }); return?_this; }, getMaxScrollRange:?function?()?{?//?內(nèi)容可滾動高度 var?_this?=?this; var?result?=?Math.max(_this.cont.height(),?_this.cont[0].scrollHeight)?-?_this.cont.height(); return?result; }, getMaxSliderRange:?function?()?{?//?滑塊可滾動距離 var?_this?=?this; var?result?=?_this.bar.height()?-?_this.slider.height(); return?result; }, scrollTo:?function?(positionValue)?{?//?內(nèi)容移動程序 var?_this?=?this, arrPosition?=?this.getAllAnchorPosition(); //?滾動條位置與tab標簽對應關(guān)系 function?getIndex(positionValue)?{ var?index?=?0; //?正序開始 //?當scrolltop的值大于錨點定位的位置,則表示內(nèi)容在那個錨點范圍里面 for?(var?i?=?0;?i?<?arrPosition.length;?i++)?{ if?(positionValue?>=?arrPosition[i])?{ index?=?i; }; } return?index; } //?錨點數(shù)和標簽數(shù)相同 if?(arrPosition.length?===?_this.tabItem.length)?{ //?標簽選擇事件 _this.changeTabSelect(getIndex(positionValue)); } _this.cont.scrollTop(positionValue); } }); Scroll.CusScrollBar?=?CusScrollBar; })(window,document,jQuery); new?Scroll.CusScrollBar({ contentSelector:?".content", barSelector:?".scroll-bar", sliderSelector:?".scroll-slider" });
小訪客 提問者
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>自定義滾動條</title> <style> body,ul,li,div,h3,p{margin:?0;?padding:?0;} body{background-color:?#ccc;} li{list-style:?none;} .clx{*zoom:?1;} .clx:after{content:?"";?display:?table;?clear:?both;} .wrap{position:?relative;?width:?540px;?margin:?30px?auto;?border:?1px?solid?#A489F1;?background-color:?#fff;} .tab{height:?34px;?color:?#666;?background-color:?#f8f8f8;} .tab?.item{float:?left;?height:?32px;?padding:?0?20px;?font-size:?14px;?line-height:?34px;?text-align:?center;?border:?1px?solid?#e5e5e5;} .tab?.active{margin:?-1px?0;?color:?#00be3c;?background-color:?#fff;?border-top:?2px?solid?#00be3c;} .main{width:?100%;?height:?300px;} .main?.content{position:?relative;?height:?100%;?padding:?0?15px;?overflow:?hidden;} .main?.content?.anchor{font:?16px/3?"Microsoft?Yahei";?text-align:?center;} .main?.content?.article-text?p{font-size:?14px;?line-height:?20px;?text-indent:?2rem;?margin-bottom:?10px;} .scroll-bar{position:?absolute;?top:?0;?right:?0;?width:?10px;?height:?100%;?background-color:?#eaeaea;} .scroll-bar?.scroll-slider{position:?absolute;?top:?0;?left:?1px;?width:?8px;?height:?30px;?background-color:?#fff;} </style> </head> <body> <div> <ul?class="tab?clx"> <li?class="item?active">第一篇</li> <li>第二篇</li> <li>第三篇</li> <li>第四篇</li> </ul> <div> <div> <h3>綠色的春</h3> <div> <p>春的百花齊放,夏的驕陽似火,秋的碩果累累,冬的白雪皚皚,無一不成為別致的風景。勤勞、智慧而又知道享受的人們,學會了春耕夏種,秋收冬藏。知道了在春天種下希望,在夏天吹一習涼風,在秋天賞一輪月,在冬天升一爐火。</p> <p>當四季輪回更替時,人們的心緒便也隨之折折疊疊。春恨秋悲,春愁夏傷皆因四季而起。一滴春雨,一片殘荷,一夜秋風,一朵雪花都足以讓心情變得敏感而豐富。人們在春中體會到了溫暖,在夏中感受到了火熱,在秋里尋找到了悲涼,在冬中懂得了殘酷。</p> <p>春纏綿,夏熱情,秋悲涼,冬莊嚴。每一個季節(jié)都象一首歌,在萬物面前心情地展示它的弦律,讓生靈情不自禁隨之翩翩起舞。沒有最好的時節(jié),也沒有最壞的時節(jié)。誠如天門慧開禪師的偈語所言:春有百花秋有月,夏有涼風冬有雪。若無閑事掛心頭,便是人間好時節(jié)。</p> <p>當氣溫不再寒冷,當風雪不再肆虐,當春雷驚醒沉睡的大地,當種子舒展他慵懶的雙臂,當枯枝抽出新芽,當燕子開始低語,當淺綠的顏色逼進眼簾,當鮮花展開迷人的笑靨……,春已翩然而至。</p> <p>春,輕易地便讓人聯(lián)想到“青春”、“光明”、“希望”這些字眼。“一年之際在于春”。人們都滿懷信心地在這個季節(jié)里,開始新的一年。農(nóng)民開始盤算一年的生計,商人開始預計一年的經(jīng)營,文人開始醞釀新的篇章,而學子則準備著新的學業(yè)。</p> <p>逃離了冬的嚴寒,避開了夏的酷熱,也沒有了秋的蕭瑟,春,這個季節(jié),始終是不慍不火的,宛如一個溫柔嫻靜的女子。偶爾的幾場春雨,亦無不帶來令人欣喜的清新與潮濕。于是有人說:“春雨貴如油”、“春光無限好”。為了充分領略這無限春光,在工作之余,人們常常會想到春游,去親近大自然,讓疲憊的身心在美好的春光中適意休憩。</p> <p>春天的時光也是短暫的。也許你還沒有來得及好好感受春的氣息,也許你還沒有來得及實踐你在春的規(guī)劃,夏已“呼嘯”而至。</p> <p>春就是這樣,來無聲,去無影。</p> </div> <h3>紅色的夏</h3> <div> <p>夏的登場,絕不會毫無聲息。</p> <p>夏會在清晨將陽光早早地送到千家萬戶,抽去人們身上懶惰的因子;夏會讓蟬發(fā)出響亮的長鳴,讓蛙演奏夜晚的交響曲;夏會讓荷吐露沁人的芬芳,讓樹木盡顯婀娜的身姿。</p> <p>灼熱的陽光,傾盆的大雨,吝嗇的風成了夏的招牌。</p> <p>夏若不是一位被嬌寵的孩兒,就必定是一位熱血方剛的青年?!昂浪倍案纱唷币恢笔窍牡娘L格。要晴就晴它個晴空萬里,要下雨就下它個酣暢淋漓。夏天的陽光,絕沒有春的柔和,一縷縷都帶著穿透力,似乎要把萬物烤焦。夏天的雨,也絕沒有春的纏綿,每一滴雨點似乎都要顯示它的“份量”,一個個都擲地有聲。夏天的風,輕易不來,來也是一絲絲的,有時還帶著炎熱的氣息。</p> <p>夏日里的人們,有著飽滿的激情和火樣的熱情。通常都是早早地起床,卻遲遲不肯歇息。他們工作、學習都鼓足了干勁,似乎要把一年的規(guī)劃放在這一季完成。夜晚,娛樂場所、夜宵攤邊、公園角落也憑空地多了許多男男女女的身影。</p> <p>在酷熱的夏季里,人們都喜歡的活動,當是游泳了。讓清涼的水浸潤發(fā)燙的肌膚,在水里游弋時,感覺自己成了一條自由自在的魚。</p> <p>時光飛逝?;蛟S你還在畏懼夏的炎熱,或許你還在留戀水的溫柔,而秋風乍起時,不覺又過了一季。</p> </div> <h3>黃色的秋</h3> <div> <p>“春種一粒粟,秋收萬顆籽”。秋,是收獲的季節(jié)。春天里辛勤的耕種,在秋天有了豐碩的成果??纯唇瘘S的麥浪和累累的碩果,于是農(nóng)人的眼里,便有了滿意的欣喜。</p> <p>秋,是團圓的季節(jié)。嫦娥奔月的古老傳說和中秋的習俗,使得華夏的兒女都記得在八月十五那一天,捧著圓圓的月餅,對著皎潔的月亮,盡量和家人一起團聚。</p> <p>秋,是思念的季節(jié)。懸掛在天空的那一輪月,最能勾起游子對故鄉(xiāng)的思念?!按睬懊髟鹿猓墒堑厣纤?,舉頭望明月,低頭思故鄉(xiāng)?!崩畎讓⒛欠N思念匯成了這首老少皆知的詩篇。</p> <p>秋,也是傷感的季節(jié)。秋風的嗚咽,秋雨的凄迷,飄零的黃葉,飛舞的落花……,無一不牽動文人墨客敏感的心??辞镲L蕭瑟,聽秋雨凄凄,那位有名的詞人柳永說:“多情自古傷離別,更哪堪,冷落清秋節(jié)?!笨磁_空院廢,落花滿地,鄭如英寫道:“臺空院廢人依舊,月沉云淡花羞。芙蓉寂寞小亭秋,黃花傷晚落,相對倍添愁”。秋,會在無意間將離愁別緒植入多愁善感的人的心里。</p> <p>但,大自然自有它固定的規(guī)律和節(jié)奏。你欣喜也罷,傷感也罷,秋,總以它不變的步伐,輕盈地走過。只剩下或許茫然無措的你,在獨自回味。</p> </div> <h3>白色的冬</h3> <div> <p>冬日的陽光,是那樣熱切地被人期盼。盡管氣溫未必因它的出現(xiàn)而上升太多,但當那絲絲光芒照耀大地時,溫暖的感覺便自心底升起。</p> <p>人們習慣在每個寒冷的日子里,渴望久違的天晴;在每一個冬季期待春暖花開。</p> </div> <div></div> </div> <div> <div></div> </div> </div> </div> <script?type="text/javascript"?src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script?type="text/javascript"> var?Scroll?=?{}; (function?(win,doc,$)?{ function?CusScrollBar(options)?{ if?(this?instanceof?CusScrollBar)?{ this.init(options); }?else?{ return?CusScrollBar(options); } } $.extend(CusScrollBar.prototype,?{ init:?function?(options)?{ var?_this?=?this; _this.options?=?{ scrollDirection:?"y", contentSelector:?"", barSelector:?"", sliderSelector:?"", tabItemSelector:?".item", tabActive:?"active", anchorSelector:?".anchor", correctSelector:?".correct-bot", articleSelector:?".article-text", wheelStep:?10 } $.extend(true,_this.options,?options?||?{}); _this.initEvent(); return?_this; }, initEvent:?function?()?{ var?opts?=?this.options; this.cont?=?$(opts.contentSelector); this.slider?=?$(opts.sliderSelector); this.bar?=?opts.barSelector???$(opts.barSelector)?:?_this.slider.parent(); this.tabItem?=?$(opts.tabItemSelector); this.anchor?=?$(opts.anchorSelector); this.correct?=?$(opts.correctSelector); this.article?=?$(opts.articleSelector); this.doc?=?$(doc); this.initSliderDrag().bindContentScroll().bindMouseWheel().initTabEvent().initArticleHeight(); }, initTabEvent:?function?()?{?//?監(jiān)聽標簽事件 var?_this?=?this; this.tabItem.on("click",function?(e)?{ e.preventDefault(); var?index?=?$(this).index(); _this.changeTabSelect(index);?//?標簽切換 _this.scrollTo(_this.cont[0].scrollTop?+?_this.getAnchorPosition(index));?//?內(nèi)容跳轉(zhuǎn)到錨點 }) return?_this; }, initArticleHeight:?function?()?{ var?_this?=?this, lastArticle?=?this.article.last(), lastArticleHeight?=?lastArticle.height(), contentHeight?=?_this.cont.height(); if?(lastArticleHeight?<?contentHeight)?{ _this.correct[0].style.height?=?contentHeight?-?lastArticleHeight?-?_this.anchor.outerHeight()?+?"px"; } return?_this; }, initSliderDrag:?function?()?{?//?滑塊拖動功能 var?_this?=?this, slider?=?this.slider, ???sliderEl?=?slider[0]; if?(sliderEl)?{ var?doc?=?this.doc, ???dragStartPagePosition, ???dragStartScrollPosition, ???dragContBarRate; function?fnMove(e)?{ e.preventDefault(); if?(dragStartPagePosition?==?null)?{ return; } //?內(nèi)容滑動距離?=?滑塊移動距離?*?比率?+?內(nèi)容開始卷曲的高度 //?滑塊移動距離?=?鼠標釋放的位置?-?鼠標開始的位置 var?scrollRange?=?dragStartScrollPosition?+?(e.pageY?-?dragStartPagePosition)?*?dragContBarRate; _this.scrollTo(scrollRange); } slider.on("mousedown",function?(e)?{ e.preventDefault(); dragStartPagePosition?=?e.pageY; dragStartScrollPosition?=?_this.cont[0].scrollTop; dragContBarRate?=?_this.getMaxScrollRange()?/?_this.getMaxSliderRange();?//?滾動比率?=?內(nèi)容可滾動高度?/?滑塊可移動距離 doc.on("mousemove.scroll",function?(e)?{ fnMove(e) }).on("mouseup.scroll",function?()?{ doc.off("mousemove.scroll?mouseup.scroll"); }); }); return?_this; } }, changeTabSelect:?function?(index)?{?//?標簽切換時變更自身元素和同胞元素的類名 var?_this?=?this, active?=?_this.options.tabActive; return?_this.tabItem.eq(index).addClass(active).siblings().removeClass(active); }, getAnchorPosition:?function?(index)?{?//?指定的錨點相對于可視區(qū)位置 var?result?=?this.anchor.eq(index).position().top; return?result; }, getAllAnchorPosition:?function?()?{?//?獲得所有錨點位置 var?_this?=?this, arrPosition?=?[]; //?正序開始 for?(var?i?=?0;?i?<?_this.anchor.length;?i++)?{ arrPosition.push(_this.cont[0].scrollTop?+?_this.getAnchorPosition(i)); } return?arrPosition; }, bindContentScroll:?function?()?{?//?監(jiān)聽內(nèi)容滾動,同步滑塊位置 var?_this?=?this; _this.cont.on("scroll",function?()?{ var?sliderEl?=?_this.slider?&&?_this.slider[0];?//?如果兩個都為object對象就返回第二個對象(第一個為jquery對象,第二個為DOM對象) if?(sliderEl)?{ sliderEl.style.top?=?_this.getSliderPosition()?+?"px"; } }) return?_this; }, getSliderPosition:?function?()?{?//?計算滑塊當前位置 var?_this?=?this, maxSliderPosition?=?_this.getMaxSliderRange(); //?滑塊移動距離?=?滑塊可移動距離?*?內(nèi)容滾動高度?/?內(nèi)容可滾動高度 var?result?=?Math.min(maxSliderPosition,?maxSliderPosition?*?_this.cont[0].scrollTop?/?_this.getMaxScrollRange()); return?result; }, bindMouseWheel:?function?()?{?//?鼠標滾輪事件程序 var?_this?=?this; //?chrome支持mousewheel?屬性取值120的倍數(shù)?正值表示向上 //?Firefox支持DOMMouseScroll?屬性取值3的倍數(shù)?負值表示向上 _this.cont.on("mousewheel?DOMMouseScroll",function?(e)?{ e.preventDefault(); //?$.event.originalEvent?指向原生事件 var?oEV?=?e.originalEvent, wheelRange?=?oEV.wheelDelta???-oEV.wheelDelta?/?120?:?(oEV.detail?||?0)?/?3; _this.scrollTo(_this.cont[0].scrollTop?+?wheelRange?*?_this.options.wheelStep); }); return?_this; }, getMaxScrollRange:?function?()?{?//?內(nèi)容可滾動高度 var?_this?=?this; var?result?=?Math.max(_this.cont.height(),?_this.cont[0].scrollHeight)?-?_this.cont.height(); return?result; }, getMaxSliderRange:?function?()?{?//?滑塊可滾動距離 var?_this?=?this; var?result?=?_this.bar.height()?-?_this.slider.height(); return?result; }, scrollTo:?function?(positionValue)?{?//?內(nèi)容移動程序 var?_this?=?this, arrPosition?=?this.getAllAnchorPosition(); //?滾動條位置與tab標簽對應關(guān)系 function?getIndex(positionValue)?{ var?index?=?0; //?正序開始 //?當scrolltop的值大于錨點定位的位置,則表示內(nèi)容在那個錨點范圍里面 for?(var?i?=?0;?i?<?arrPosition.length;?i++)?{ if?(positionValue?>=?arrPosition[i])?{ index?=?i; }; } return?index; } //?錨點數(shù)和標簽數(shù)相同 if?(arrPosition.length?===?_this.tabItem.length)?{ //?標簽選擇事件 _this.changeTabSelect(getIndex(positionValue)); } _this.cont.scrollTop(positionValue); } }); Scroll.CusScrollBar?=?CusScrollBar; })(window,document,jQuery); new?Scroll.CusScrollBar({ contentSelector:?".content", barSelector:?".scroll-bar", sliderSelector:?".scroll-slider" }); </script> </body> </html>
舉報
來一次jQuery封裝之旅,本教程帶你深入理解滾輪事件交互
2 回答能不能傳個源代碼
3 回答求源碼 求源碼
1 回答源碼在哪里下載?
1 回答能不能把源代碼貼出來啊
1 回答有源碼嗎?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2018-05-01
https://github.com/liuzhaoxu1996/slider-plugin
2016-11-21
第一個排版亂了,js代碼可以貼后面的。
2016-11-21
2016-11-21