圖片與JavaScript配合做出個性滾動條_瀏覽器特效

如果你想定制出一個漂亮的滾動條的話,這個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" mrc="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;
}
#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.ghpqjb.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需調用兩次的bug
		scrollBarHandleHeight = parseInt(mrc.offsetHeight/mrc.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;
			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;					//設置滾輪事件,e.wheelDelta與e.detail分別兼容IE、W3C，根據返回值的正負來判斷滾動方向
			if(e.wheelDelta) { eDir = e.wheelDelta/120; }
			else if(e.detail) { eDir = -e.detail/3; }
			if(eDir > 0) { mrc.scrollTop -= 80; }	//步長設80像素a比較接近window滾動條的滾動速度
			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>

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

[收藏][報錯][返回列表]

相關瀏覽器特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

圖片與JavaScript配合做出個性滾動條_瀏覽器特效

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

瀏覽器特效推薦

猜你也喜歡看這些