網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>瀏覽器特效代碼>

圖片與JavaScript配合做出個(gè)性滾動(dòng)條_瀏覽器特效

如果你想定制出一個(gè)漂亮的滾動(dòng)條的話,這個(gè)JS特效可能會(huì)適合你,不過(guò)代碼稍嫌麻煩些,但效果真的不錯(cuò),代碼含有中文注釋,學(xué)習(xí)也是不錯(cuò)的,希望朋友們喜歡.

<!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" mrc="text/html; charset=utf-8" />
<title>圖片與JavaScript配合做出個(gè)性滾動(dòng)條</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;
}
#mrc {
	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(http://www.wf0088.com/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 id="out">
 <div id="mrc">
 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 id="scrollBar">
 	<div id="scrollBarTop" class="scroll_bar_top"></div>
 <div id="scrollBarHandle"></div>
 <div 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"),
		mrc = ximen.$("mrc"),
		scrollBar = ximen.$("scrollBar"),
		scrollBarTop = ximen.$("scrollBarTop"),
		scrollBarHandle = ximen.$("scrollBarHandle"),
		scrollBarBottom = ximen.$("scrollBarBottom"),
		scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),
		scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),
		mrcScrollHeight = mrc.scrollHeight,//將mrc.scrollHeight賦一次值,解決IE6下scrollHeight需調(diào)用兩次的bug
		scrollBarHandleHeight = parseInt(mrc.offsetHeight/mrc.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),
		setScrollBarHandle = function() {//當(dāng)內(nèi)容超多時(shí)設(shè)置拖拽條子的最小高度
			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;
			mrc.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(mrc.scrollHeight - mrc.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;					//設(shè)置滾輪事件,e.wheelDelta與e.detail分別兼容IE、W3C，根據(jù)返回值的正負(fù)來(lái)判斷滾動(dòng)方向
			if(e.wheelDelta) { eDir = e.wheelDelta/120; }
			else if(e.detail) { eDir = -e.detail/3; }
			if(eDir > 0) { mrc.scrollTop -= 80; }	//步長(zhǎng)設(shè)80像素a比較接近window滾動(dòng)條的滾動(dòng)速度
			else { mrc.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(){ mrc.scrollTop -= 15; },10); }
			else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ mrc.scrollTop += 15; },10); }
		};
	setScrollBarHandle();
	ximen.bind(mrc,"scroll",function(){
		scrollBarHandle.style.top = mrc.scrollTop/(mrc.scrollHeight - mrc.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";
	});
	ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ mrc.scrollTop += 15; },10); });
	ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ mrc.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>

所屬頻道：瀏覽器特效/更新時(shí)間：2013-04-18

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)瀏覽器特效：

圖片與JavaScript配合做出個(gè)性滾動(dòng)條_瀏覽器特效

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些