第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

<ruby id="mxbgu"><code id="mxbgu"></code></ruby>

                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /jQuery
                        
                        /jQuery實(shí)現(xiàn)自定義滾動(dòng)條

課講的很好，能給一下源碼碼？

這介個(gè)的源碼有嗎，很多地方法沒(méi)有太明白!!!

01:06

小訪客

2016-11-19

源自：jQuery實(shí)現(xiàn)自定義滾動(dòng)條 4-1

關(guān)注問(wèn)題我要回答

1382

操作

收起

4 回答

newway
2018-05-01

https://github.com/liuzhaoxu1996/slider-plugin

0 回復(fù) 有任何疑惑可以回復(fù)我~

學(xué)之舟_36820
2016-11-21

第一個(gè)排版亂了，js代碼可以貼后面的。

1 回復(fù) 有任何疑惑可以回復(fù)我~

學(xué)之舟_36820
2016-11-21

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)聽(tīng)標(biāo)簽事件
			var?_this?=?this;

			this.tabItem.on("click",function?(e)?{
				e.preventDefault();
				var?index?=?$(this).index();

				_this.changeTabSelect(index);?//?標(biāo)簽切換

				_this.scrollTo(_this.cont[0].scrollTop?+?_this.getAnchorPosition(index));?//?內(nèi)容跳轉(zhuǎn)到錨點(diǎ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?()?{?//?滑塊拖動(dòng)功能
			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)容滑動(dòng)距離?=?滑塊移動(dòng)距離?*?比率?+?內(nèi)容開(kāi)始卷曲的高度
					//?滑塊移動(dòng)距離?=?鼠標(biāo)釋放的位置?-?鼠標(biāo)開(kā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();?//?滾動(dòng)比率?=?內(nèi)容可滾動(dòng)高度?/?滑塊可移動(dòng)距離

					doc.on("mousemove.scroll",function?(e)?{
						fnMove(e)
					}).on("mouseup.scroll",function?()?{
						doc.off("mousemove.scroll?mouseup.scroll");
					});
				});

				return?_this;
			}
		},
		changeTabSelect:?function?(index)?{?//?標(biāo)簽切換時(shí)變更自身元素和同胞元素的類名
			var?_this?=?this,
				active?=?_this.options.tabActive;

			return?_this.tabItem.eq(index).addClass(active).siblings().removeClass(active);
		},
		getAnchorPosition:?function?(index)?{?//?指定的錨點(diǎn)相對(duì)于可視區(qū)位置
			var?result?=?this.anchor.eq(index).position().top;
			return?result;
		},
		getAllAnchorPosition:?function?()?{?//?獲得所有錨點(diǎn)位置
			var?_this?=?this,
				arrPosition?=?[];
			//?正序開(kāi)始
			for?(var?i?=?0;?i?<?_this.anchor.length;?i++)?{
				arrPosition.push(_this.cont[0].scrollTop?+?_this.getAnchorPosition(i));
			}

			return?arrPosition;
		},
		bindContentScroll:?function?()?{?//?監(jiān)聽(tīng)內(nèi)容滾動(dòng)，同步滑塊位置
			var?_this?=?this;

			_this.cont.on("scroll",function?()?{
				var?sliderEl?=?_this.slider?&&?_this.slider[0];?//?如果兩個(gè)都為object對(duì)象就返回第二個(gè)對(duì)象(第一個(gè)為jquery對(duì)象,第二個(gè)為DOM對(duì)象)

				if?(sliderEl)?{
					sliderEl.style.top?=?_this.getSliderPosition()?+?"px";
				}
			})

			return?_this;
		},
		getSliderPosition:?function?()?{?//?計(jì)算滑塊當(dāng)前位置
			var?_this?=?this,
				maxSliderPosition?=?_this.getMaxSliderRange();

			//?滑塊移動(dòng)距離?=?滑塊可移動(dòng)距離?*?內(nèi)容滾動(dòng)高度?/?內(nèi)容可滾動(dòng)高度
			var?result?=?Math.min(maxSliderPosition,?maxSliderPosition?*?_this.cont[0].scrollTop?/?_this.getMaxScrollRange());
			return?result;
		},
		bindMouseWheel:?function?()?{?//?鼠標(biāo)滾輪事件程序
			var?_this?=?this;

			//?chrome支持mousewheel?屬性取值120的倍數(shù)?正值表示向上
			//?Firefox支持DOMMouseScroll?屬性取值3的倍數(shù)?負(fù)值表示向上
			_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)容可滾動(dòng)高度
			var?_this?=?this;
			var?result?=?Math.max(_this.cont.height(),?_this.cont[0].scrollHeight)?-?_this.cont.height();
			return?result;
		},
		getMaxSliderRange:?function?()?{?//?滑塊可滾動(dòng)距離
			var?_this?=?this;
			var?result?=?_this.bar.height()?-?_this.slider.height();
			return?result;
		},
		scrollTo:?function?(positionValue)?{?//?內(nèi)容移動(dòng)程序
			var?_this?=?this,
				arrPosition?=?this.getAllAnchorPosition();

			//?滾動(dòng)條位置與tab標(biāo)簽對(duì)應(yīng)關(guān)系
			function?getIndex(positionValue)?{
				var?index?=?0;

				//?正序開(kāi)始
				//?當(dāng)scrolltop的值大于錨點(diǎn)定位的位置，則表示內(nèi)容在那個(gè)錨點(diǎn)范圍里面
				for?(var?i?=?0;?i?<?arrPosition.length;?i++)?{
					if?(positionValue?>=?arrPosition[i])?{
						index?=?i;
					};
				}

				return?index;
			}

			//?錨點(diǎn)數(shù)和標(biāo)簽數(shù)相同
			if?(arrPosition.length?===?_this.tabItem.length)?{
				//?標(biāo)簽選擇事件
				_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"
});

1 回復(fù) 有任何疑惑可以回復(fù)我~

#1

小訪客提問(wèn)者

非常感謝?。。?！

2016-12-30 回復(fù) 有任何疑惑可以回復(fù)我~

學(xué)之舟_36820
2016-11-21

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>自定義滾動(dòng)條</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>春的百花齊放，夏的驕陽(yáng)似火，秋的碩果累累，冬的白雪皚皚，無(wú)一不成為別致的風(fēng)景。勤勞、智慧而又知道享受的人們，學(xué)會(huì)了春耕夏種，秋收冬藏。知道了在春天種下希望，在夏天吹一習(xí)涼風(fēng)，在秋天賞一輪月，在冬天升一爐火。</p>
<p>當(dāng)四季輪回更替時(shí)，人們的心緒便也隨之折折疊疊。春恨秋悲，春愁夏傷皆因四季而起。一滴春雨，一片殘荷，一夜秋風(fēng)，一朵雪花都足以讓心情變得敏感而豐富。人們?cè)诖褐畜w會(huì)到了溫暖，在夏中感受到了火熱，在秋里尋找到了悲涼，在冬中懂得了殘酷。</p>
<p>春纏綿，夏熱情，秋悲涼，冬莊嚴(yán)。每一個(gè)季節(jié)都象一首歌，在萬(wàn)物面前心情地展示它的弦律，讓生靈情不自禁隨之翩翩起舞。沒(méi)有最好的時(shí)節(jié)，也沒(méi)有最壞的時(shí)節(jié)。誠(chéng)如天門慧開(kāi)禪師的偈語(yǔ)所言：春有百花秋有月，夏有涼風(fēng)冬有雪。若無(wú)閑事掛心頭，便是人間好時(shí)節(jié)。</p>
<p>當(dāng)氣溫不再寒冷，當(dāng)風(fēng)雪不再肆虐，當(dāng)春雷驚醒沉睡的大地，當(dāng)種子舒展他慵懶的雙臂，當(dāng)枯枝抽出新芽，當(dāng)燕子開(kāi)始低語(yǔ)，當(dāng)淺綠的顏色逼進(jìn)眼簾，當(dāng)鮮花展開(kāi)迷人的笑靨……，春已翩然而至。</p>
<p>春，輕易地便讓人聯(lián)想到“青春”、“光明”、“希望”這些字眼?！耙荒曛H在于春”。人們都滿懷信心地在這個(gè)季節(jié)里，開(kāi)始新的一年。農(nóng)民開(kāi)始盤(pán)算一年的生計(jì)，商人開(kāi)始預(yù)計(jì)一年的經(jīng)營(yíng)，文人開(kāi)始醞釀新的篇章，而學(xué)子則準(zhǔn)備著新的學(xué)業(yè)。</p>
<p>逃離了冬的嚴(yán)寒，避開(kāi)了夏的酷熱，也沒(méi)有了秋的蕭瑟，春，這個(gè)季節(jié)，始終是不慍不火的，宛如一個(gè)溫柔嫻靜的女子。偶爾的幾場(chǎng)春雨，亦無(wú)不帶來(lái)令人欣喜的清新與潮濕。于是有人說(shuō)：“春雨貴如油”、“春光無(wú)限好”。為了充分領(lǐng)略這無(wú)限春光，在工作之余，人們常常會(huì)想到春游，去親近大自然，讓疲憊的身心在美好的春光中適意休憩。</p>
<p>春天的時(shí)光也是短暫的。也許你還沒(méi)有來(lái)得及好好感受春的氣息，也許你還沒(méi)有來(lái)得及實(shí)踐你在春的規(guī)劃，夏已“呼嘯”而至。</p>
<p>春就是這樣，來(lái)無(wú)聲，去無(wú)影。</p>
</div>
<h3>紅色的夏</h3>
<div>
<p>夏的登場(chǎng)，絕不會(huì)毫無(wú)聲息。</p>
<p>夏會(huì)在清晨將陽(yáng)光早早地送到千家萬(wàn)戶，抽去人們身上懶惰的因子;夏會(huì)讓蟬發(fā)出響亮的長(zhǎng)鳴，讓蛙演奏夜晚的交響曲;夏會(huì)讓荷吐露沁人的芬芳，讓樹(shù)木盡顯婀娜的身姿。</p>
<p>灼熱的陽(yáng)光，傾盆的大雨，吝嗇的風(fēng)成了夏的招牌。</p>
<p>夏若不是一位被嬌寵的孩兒，就必定是一位熱血方剛的青年?！昂浪倍案纱唷币恢笔窍牡娘L(fēng)格。要晴就晴它個(gè)晴空萬(wàn)里，要下雨就下它個(gè)酣暢淋漓。夏天的陽(yáng)光，絕沒(méi)有春的柔和，一縷縷都帶著穿透力，似乎要把萬(wàn)物烤焦。夏天的雨，也絕沒(méi)有春的纏綿，每一滴雨點(diǎn)似乎都要顯示它的“份量”，一個(gè)個(gè)都擲地有聲。夏天的風(fēng)，輕易不來(lái)，來(lái)也是一絲絲的，有時(shí)還帶著炎熱的氣息。</p>
<p>夏日里的人們，有著飽滿的激情和火樣的熱情。通常都是早早地起床，卻遲遲不肯歇息。他們工作、學(xué)習(xí)都鼓足了干勁，似乎要把一年的規(guī)劃放在這一季完成。夜晚，娛樂(lè)場(chǎng)所、夜宵攤邊、公園角落也憑空地多了許多男男女女的身影。</p>
<p>在酷熱的夏季里，人們都喜歡的活動(dòng)，當(dāng)是游泳了。讓清涼的水浸潤(rùn)發(fā)燙的肌膚，在水里游弋時(shí)，感覺(jué)自己成了一條自由自在的魚(yú)。</p>
<p>時(shí)光飛逝?；蛟S你還在畏懼夏的炎熱，或許你還在留戀水的溫柔，而秋風(fēng)乍起時(shí)，不覺(jué)又過(guò)了一季。</p>
</div>
<h3>黃色的秋</h3>
<div>
<p>“春種一粒粟，秋收萬(wàn)顆籽”。秋，是收獲的季節(jié)。春天里辛勤的耕種，在秋天有了豐碩的成果。看看金黃的麥浪和累累的碩果，于是農(nóng)人的眼里，便有了滿意的欣喜。</p>
<p>秋，是團(tuán)圓的季節(jié)。嫦娥奔月的古老傳說(shuō)和中秋的習(xí)俗，使得華夏的兒女都記得在八月十五那一天，捧著圓圓的月餅，對(duì)著皎潔的月亮，盡量和家人一起團(tuán)聚。</p>
<p>秋，是思念的季節(jié)。懸掛在天空的那一輪月，最能勾起游子對(duì)故鄉(xiāng)的思念?！按睬懊髟鹿?，疑是地上霜，舉頭望明月，低頭思故鄉(xiāng)。”李白將那種思念匯成了這首老少皆知的詩(shī)篇。</p>
<p>秋，也是傷感的季節(jié)。秋風(fēng)的嗚咽，秋雨的凄迷，飄零的黃葉，飛舞的落花……，無(wú)一不牽動(dòng)文人墨客敏感的心?？辞镲L(fēng)蕭瑟，聽(tīng)秋雨凄凄，那位有名的詞人柳永說(shuō)：“多情自古傷離別，更哪堪，冷落清秋節(jié)?！笨磁_(tái)空院廢，落花滿地，鄭如英寫(xiě)道：“臺(tái)空院廢人依舊，月沉云淡花羞。芙蓉寂寞小亭秋，黃花傷晚落，相對(duì)倍添愁”。秋，會(huì)在無(wú)意間將離愁別緒植入多愁善感的人的心里。</p>
<p>但，大自然自有它固定的規(guī)律和節(jié)奏。你欣喜也罷，傷感也罷，秋，總以它不變的步伐，輕盈地走過(guò)。只剩下或許茫然無(wú)措的你，在獨(dú)自回味。</p>
</div>
<h3>白色的冬</h3>
<div>
<p>冬日的陽(yáng)光，是那樣熱切地被人期盼。盡管氣溫未必因它的出現(xiàn)而上升太多，但當(dāng)那絲絲光芒照耀大地時(shí)，溫暖的感覺(jué)便自心底升起。</p>
<p>人們習(xí)慣在每個(gè)寒冷的日子里，渴望久違的天晴;在每一個(gè)冬季期待春暖花開(kāi)。</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)聽(tīng)標(biāo)簽事件
var?_this?=?this;

this.tabItem.on("click",function?(e)?{
e.preventDefault();
var?index?=?$(this).index();

_this.changeTabSelect(index);?//?標(biāo)簽切換

_this.scrollTo(_this.cont[0].scrollTop?+?_this.getAnchorPosition(index));?//?內(nèi)容跳轉(zhuǎn)到錨點(diǎ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?()?{?//?滑塊拖動(dòng)功能
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)容滑動(dòng)距離?=?滑塊移動(dòng)距離?*?比率?+?內(nèi)容開(kāi)始卷曲的高度
//?滑塊移動(dòng)距離?=?鼠標(biāo)釋放的位置?-?鼠標(biāo)開(kā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();?//?滾動(dòng)比率?=?內(nèi)容可滾動(dòng)高度?/?滑塊可移動(dòng)距離

doc.on("mousemove.scroll",function?(e)?{
fnMove(e)
}).on("mouseup.scroll",function?()?{
doc.off("mousemove.scroll?mouseup.scroll");
});
});

return?_this;
}
},
changeTabSelect:?function?(index)?{?//?標(biāo)簽切換時(shí)變更自身元素和同胞元素的類名
var?_this?=?this,
active?=?_this.options.tabActive;

return?_this.tabItem.eq(index).addClass(active).siblings().removeClass(active);
},
getAnchorPosition:?function?(index)?{?//?指定的錨點(diǎn)相對(duì)于可視區(qū)位置
var?result?=?this.anchor.eq(index).position().top;
return?result;
},
getAllAnchorPosition:?function?()?{?//?獲得所有錨點(diǎn)位置
var?_this?=?this,
arrPosition?=?[];
//?正序開(kāi)始
for?(var?i?=?0;?i?<?_this.anchor.length;?i++)?{
arrPosition.push(_this.cont[0].scrollTop?+?_this.getAnchorPosition(i));
}

return?arrPosition;
},
bindContentScroll:?function?()?{?//?監(jiān)聽(tīng)內(nèi)容滾動(dòng)，同步滑塊位置
var?_this?=?this;

_this.cont.on("scroll",function?()?{
var?sliderEl?=?_this.slider?&&?_this.slider[0];?//?如果兩個(gè)都為object對(duì)象就返回第二個(gè)對(duì)象(第一個(gè)為jquery對(duì)象,第二個(gè)為DOM對(duì)象)

if?(sliderEl)?{
sliderEl.style.top?=?_this.getSliderPosition()?+?"px";
}
})

return?_this;
},
getSliderPosition:?function?()?{?//?計(jì)算滑塊當(dāng)前位置
var?_this?=?this,
maxSliderPosition?=?_this.getMaxSliderRange();

//?滑塊移動(dòng)距離?=?滑塊可移動(dòng)距離?*?內(nèi)容滾動(dòng)高度?/?內(nèi)容可滾動(dòng)高度
var?result?=?Math.min(maxSliderPosition,?maxSliderPosition?*?_this.cont[0].scrollTop?/?_this.getMaxScrollRange());
return?result;
},
bindMouseWheel:?function?()?{?//?鼠標(biāo)滾輪事件程序
var?_this?=?this;

//?chrome支持mousewheel?屬性取值120的倍數(shù)?正值表示向上
//?Firefox支持DOMMouseScroll?屬性取值3的倍數(shù)?負(fù)值表示向上
_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)容可滾動(dòng)高度
var?_this?=?this;
var?result?=?Math.max(_this.cont.height(),?_this.cont[0].scrollHeight)?-?_this.cont.height();
return?result;
},
getMaxSliderRange:?function?()?{?//?滑塊可滾動(dòng)距離
var?_this?=?this;
var?result?=?_this.bar.height()?-?_this.slider.height();
return?result;
},
scrollTo:?function?(positionValue)?{?//?內(nèi)容移動(dòng)程序
var?_this?=?this,
arrPosition?=?this.getAllAnchorPosition();

//?滾動(dòng)條位置與tab標(biāo)簽對(duì)應(yīng)關(guān)系
function?getIndex(positionValue)?{
var?index?=?0;

//?正序開(kāi)始
//?當(dāng)scrolltop的值大于錨點(diǎn)定位的位置，則表示內(nèi)容在那個(gè)錨點(diǎn)范圍里面
for?(var?i?=?0;?i?<?arrPosition.length;?i++)?{
if?(positionValue?>=?arrPosition[i])?{
index?=?i;
};
}

return?index;
}

//?錨點(diǎn)數(shù)和標(biāo)簽數(shù)相同
if?(arrPosition.length?===?_this.tabItem.length)?{
//?標(biāo)簽選擇事件
_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>

3 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

jQuery實(shí)現(xiàn)自定義滾動(dòng)條

參與學(xué)習(xí) 39574 人
解答問(wèn)題 83 個(gè)

來(lái)一次jQuery封裝之旅，本教程帶你深入理解滾輪事件交互

進(jìn)入課程

本課相似問(wèn)答

2 回答能不能傳個(gè)源代碼

3 回答求源碼求源碼

1 回答源碼在哪里下載？

1 回答能不能把源代碼貼出來(lái)啊

1 回答有源碼嗎？

搜索更多本課相關(guān)問(wèn)答

課講的很好，能給一下源碼碼？

我要回答關(guān)注問(wèn)題

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

<thead id="mcvzl"><rt id="mcvzl"></rt></thead>

<p id="mcvzl"><li id="mcvzl"></li></p>