圖片與JavaScript配合做出個性滾動條

2024-09-05 12:17:53

字體：大中小

來源：轉載

供稿：網友

如果你想定制出一個漂亮的滾動條的話,這個JS特效可能會適合你,不過代碼稍嫌麻煩些,但效果真的不錯,代碼含有中文注釋,學習也是不錯的,希望朋友們喜歡.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>圖片與JavaScript配合做出個性滾動條</title><style type="text/css">* { margin:0; padding:0; }body { margin:20px 0 400px 20px; font:12px Arial; }h1 { font-size:14px; }ol { margin:20px; line-height:160%; }#out {	position:relative;	width:500px;	height:300px;	margin:100px 0 100px 80px;	border:1px solid #369;	overflow:hidden;}#content {	width:520px;	height:100%;	overflow:auto;	-moz-user-select:none;}#scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a {	background-image:url(/jscss/demoimg/200910/un_bg_scrollBar.gif);}#scrollBar {	position:absolute;	top:0;	right:0;	z-index:9;	width:14px;	height:100%;	background-repeat:repeat-y;	background-position:-42px 0;	float:left;}#scrollBarTop,#scrollBarHandle,#scrollBarBottom {	position:absolute;	left:0;	cursor:default;}#scrollBarTop,#scrollBarBottom {	width:100%;	height:14px;	color:#fff;	text-align:center;}#scrollBarTop { top:0; }#scrollBarBottom { bottom:0; }#scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; }.scroll_bar_top { background-position:0 0; }.scroll_bar_top_a { background-position:-14px 0; }.scroll_bar_bottom { background-position:-56px 0; }.scroll_bar_bottom_a { background-position:-70px 0; }</style></head><body><div class="iwvjtn8m0" id="out"> <div class="iwvjtn8m0" id="content"> fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs </div> <div class="iwvjtn8m0" id="scrollBar"> 	<div class="iwvjtn8m0" id="scrollBarTop" class="scroll_bar_top"></div> <div class="iwvjtn8m0" id="scrollBarHandle"></div> <div class="iwvjtn8m0" id="scrollBarBottom" class="scroll_bar_bottom"></div> </div></div><script>var ximen = {	$:function(o){ return document.getElementById(o); },	getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },	getOffset:function(o) {		var t = o.offsetTop,h = o.offsetHeight;		while(o = o.offsetParent) { t += o.offsetTop; }		return { top:t, height:h };	},	bind:function(o,eType,fn) {		if(o.addEventListener) { o.addEventListener(eType,fn,false); }		else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }		else { o["on" + eType] = fn; }	},	unbind:function(o,eType,fn) {		if(o.removeEventListener) { o.removeEventListener(eType,fn,false); }		else if(o.detachEvent) { o.detachEvent("on" + eType,fn); }		else { o["on" + eType] = fn; }	},	stopPropagate:function(e) {		if(e && e.stopPropagation) { e.stopPropagation(); } 		else { window.event.cancelBubble = true; }		return false;	},	stopDefault:function(e) {		e = e || window.event;		e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);	}};(function(){	var myScrollDown,myScrollUp,scrollBarMouseDown,scrollBarMouseUp,relY,		out = ximen.$("out"),		content = ximen.$("content"),		scrollBar = ximen.$("scrollBar"),		scrollBarTop = ximen.$("scrollBarTop"),		scrollBarHandle = ximen.$("scrollBarHandle"),		scrollBarBottom = ximen.$("scrollBarBottom"),		scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),		scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),		contentScrollHeight = content.scrollHeight,//將content.scrollHeight賦一次值,解決IE6下scrollHeight需調用兩次的bug		scrollBarHandleHeight = parseInt(content.offsetHeight/content.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),		setScrollBarHandle = function() {//當內容超多時設置拖拽條子的最小高度			scrollBarHandle.style.top = scrollBarUpHeight + "px";			if(scrollBarHandleHeight > 15) { scrollBarHandle.style.height = scrollBarHandleHeight + "px"; }			else { scrollBarHandleHeight = 15; scrollBarHandle.style.height = "15px"; }		},		clearAllInterval = function() { clearInterval(myScrollDown); clearInterval(myScrollUp); clearInterval(scrollBarMouseDown); },		forMousemove = function(e) {			var e = e || window.event;			content.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(content.scrollHeight - content.offsetHeight);		},		forMouseDown = function(event){			var et = event.target || event.srcElement;			relY = event.clientY - et.offsetTop;			ximen.bind(document,"mousemove",forMousemove);		},		scrollDir = function(e) {			var e = e || window.event,eDir;					//設置滾輪事件,e.wheelDelta與e.detail分別兼容IE、W3C，根據返回值的正負來判斷滾動方向			if(e.wheelDelta) { eDir = e.wheelDelta/120; }			else if(e.detail) { eDir = -e.detail/3; }			if(eDir > 0) { content.scrollTop -= 80; }	//步長設80像素a比較接近window滾動條的滾動速度			else { content.scrollTop += 80; }			ximen.stopDefault(e);		},		scrollBarClick = function(e) {			var e = e || window.event,				mStep = scrollBar.offsetHeight,				documentScrollTop = document.documentElement.scrollTop,				hOffset = ximen.getOffset(scrollBarHandle);			if(documentScrollTop + e.clientY < hOffset.top) { scrollBarMouseDown = setInterval(function(){ content.scrollTop -= 15; },10); }			else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ content.scrollTop += 15; },10); }		};	setScrollBarHandle();	ximen.bind(content,"scroll",function(){		scrollBarHandle.style.top = content.scrollTop/(content.scrollHeight - content.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";	});	ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ content.scrollTop += 15; },10); });	ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ content.scrollTop -= 15; },10); });	ximen.bind(scrollBarBottom,"mouseup",clearAllInterval);	ximen.bind(scrollBarBottom,"mouseout",clearAllInterval);	ximen.bind(scrollBarTop,"mouseup",clearAllInterval);	ximen.bind(scrollBarTop,"mouseout",clearAllInterval);	ximen.bind(scrollBarHandle,"mousedown",forMouseDown);	ximen.bind(document,"mouseup",function(){		ximen.unbind(document,"mousemove",forMousemove);		ximen.unbind(scrollBarHandle,"mousemove",forMousemove);	});	ximen.bind(out,"selectstart",function(){ return false; });	ximen.bind(out,"select",function(){ document.selection.empty(); });	ximen.bind(out,"mousewheel",scrollDir);	ximen.bind(out,"DOMMouseScroll",scrollDir);	ximen.bind(scrollBar,"mousedown",scrollBarClick);	ximen.bind(scrollBar,"mouseup",clearAllInterval);	ximen.bind(scrollBarTop,"click",function(event){ ximen.stopPropagate(event); });	ximen.bind(scrollBarTop,"mousedown",function(){ scrollBarTop.className = "scroll_bar_top_a"; });	ximen.bind(scrollBarTop,"mouseup",function(){ scrollBarTop.className = "scroll_bar_top"; });	ximen.bind(scrollBarTop,"mouseout",function(){ scrollBarTop.className = "scroll_bar_top"; });	ximen.bind(scrollBarBottom,"click",function(event){ ximen.stopPropagate(event); });	ximen.bind(scrollBarBottom,"mousedown",function(){ scrollBarBottom.className = "scroll_bar_bottom_a"; });	ximen.bind(scrollBarBottom,"mouseup",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });	ximen.bind(scrollBarBottom,"mouseout",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });})();</script></body></html>

上一篇：JavaScript接收鍵盤指令示例

下一篇：阻止別人不那么容易下載你的CSS文件的方法