圖片與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://m.hl5o.cn/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() {//當內(nèi)容超多時設(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ù)返回值的正負來判斷滾動方向
			if(e.wheelDelta) { eDir = e.wheelDelta/120; }
			else if(e.detail) { eDir = -e.detail/3; }
			if(eDir > 0) { mrc.scrollTop -= 80; }	//步長設(shè)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

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

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

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

瀏覽器特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復制本頁鏈接| 搜索圖片與JavaScript配合做出個性滾動條
特效說明：
瀏覽器模板-圖片與JavaScript配合做出個性滾動條。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

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

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

瀏覽器特效推薦

猜你也喜歡看這些