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

如果你想定制出一個(gè)漂亮的滾動(dòng)條的話,這個(gè)JS特效可能會(huì)適合你,不過代碼稍嫌麻煩些,但效果真的不錯(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.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() {//當(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ù)來判斷滾動(dòng)方向
			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滾動(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)瀏覽器特效：

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

瀏覽器特效推薦

猜你也喜歡看這些

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

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

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

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

瀏覽器特效推薦

猜你也喜歡看這些