給一個Div層添加滾動條功能_層和布局特效

這是一個DIV層，加入了一個滾動條功能，當(dāng)超出范圍的時候便會自動出現(xiàn)，你可以拖動滾動條看看效果哦。

<!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=gb2312" />
<title>帶滾動條的Div</title>
	<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	p{
		margin-top:0px;
	}
	#dhtmlgoodies_scrolldiv{
		width:530px;
		height:500px;
	}
	#scrolldiv_parentContainer{
		width:500px;
		height:100%;
		overflow:hidden;
		border:1px solid #BC8FBD;
		float:left;
		position:relative;
	}
		#scrolldiv_mrc{
		padding: 5px;
		position:relative;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size: 0.9em;
		line-height:130%;
		color: #333;
	}
	
		#scrolldiv_slider{
		width:15px;
		margin-left:2px;
		height:500px;
		float:left;
	}
	
		#scrolldiv_scrollbar{
		width:15px;
		height:460px;	/* Total height - 40 pixels */
		border:1px solid #BC8FBD;
		position:relative;
		
	}
		#scrolldiv_theScroll{
		margin:1px;
		width:13px;
		height:13px;
		background-color:#BC8FBD;
		position:absolute;	
		top:0px;
		left:0px;
		cursor:pointer;
	}
		#scrolldiv_scrollUp,#scrolldiv_scrollDown{
		width:15px;
		height:16px;
		border:1px solid #BC8FBD;
		color: #BC8FBD;
		text-align:center;
		font-size:16px;
		line-height:16px;
		cursor:pointer;
	}
	#scrolldiv_scrollUp{
		margin-bottom:2px;
	}
	#scrolldiv_scrollDown{
		margin-top:2px;
	}
	#scrolldiv_scrollDown span,#scrolldiv_scrollUp span{
		font-family: Symbol;
	}

</style>
	<script type="text/javascript">
	var mrcHeight = 0;
	var visibleContentHeight = 0;	
	var scrollActive = false;
	/*www.hl5o.cn*/
	var scrollHandleObj = false;
	var scrollHandleHeight = false;
	var scrollbarTop = false;
	var eventYPos = false;
	var scrollbuttonActive = false;
	var scrollbuttonDirection = false;
	var scrollbuttonSpeed = 2;
	var scrollTimer = 10;	
	var scrollMoveToActive = false;
	var scrollMoveToYPosition = false;
	function scrollDiv_startScroll(e)
	{
		if(document.all)e = event;
		scrollbarTop = document.getElementById('scrolldiv_theScroll').offsetTop;
		eventYPos = e.clientY;
		scrollActive = true;
	}
	
	function scrollDiv_stopScroll()
	{
		scrollActive = false;
		scrollbuttonActive = false;
		scrollMoveToActive = false;
	}
	function scrollDiv_scroll(e)
	{
		if(!scrollActive)return;
		if(document.all)e = event;
		if(e.button!=1 && document.all)return;
		var topPos = scrollbarTop + e.clientY - eventYPos; 
		if(topPos<0)topPos=0;
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1)topPos = visibleContentHeight-(scrollHandleHeight+4);
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_mrc').style.top = 0 - Math.floor((mrcHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 
	}
	function scrolldiv_scrollMoveToInit(e)
	{		
		if(document.all)e = event;
		scrollMoveToActive = true;
		scrollMoveToYPosition = e.clientY - document.getElementById('scrolldiv_scrollbar').offsetTop;
		if(document.getElementById('scrolldiv_theScroll').offsetTop/1 > scrollMoveToYPosition) scrollbuttonDirection = scrollbuttonSpeed*-2; else  scrollbuttonDirection = scrollbuttonSpeed*2;
		scrolldiv_scrollMoveTo();	
	}
	
	function scrolldiv_scrollMoveTo()
	{
		if(!scrollMoveToActive || scrollActive)return;
		var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');
		topPos = topPos/1 + scrollbuttonDirection;
		if(topPos<0){
			topPos=0;
			scrollMoveToActive=false;
		}
		if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){
			topPos = visibleContentHeight-(scrollHandleHeight+4);	
			scrollMoveToActive=false;
		}
		if(scrollbuttonDirection<0 && topPos<scrollMoveToYPosition-scrollHandleHeight/2)return;	
		if(scrollbuttonDirection>0 && topPos>scrollMoveToYPosition-scrollHandleHeight/2)return;			
		document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
		document.getElementById('scrolldiv_mrc').style.top = 0 - Math.floor((mrcHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 		
		setTimeout('scrolldiv_scrollMoveTo()',scrollTimer);		
	}
	
	function cancelEvent()
	{
		return false;			
	}

</head>
<body>
<div id="dhtmlgoodies_scrolldiv">
<div id="scrolldiv_parentContainer">
	<div id="scrolldiv_mrc">這是一個DIV層，加入了一個滾動條功能，當(dāng)超出范圍的時候便會自動出現(xiàn)，你可以拖動滾動條看看效果哦。<br>
	</div>
	</div>
	<div id="scrolldiv_slider">
	<div id="scrolldiv_scrollUp"><img src="/jscss/demoimg/200905/arrow_up.gif"></div>
	<div id="scrolldiv_scrollbar">
	<div id="scrolldiv_theScroll"><span></span></div>
	</div>
	<div id="scrolldiv_scrollDown"><img src="/jscss/demoimg/200905/arrow_down.gif"></div>
	</div>
</div>
<script type="text/javascript">
scrolldiv_setColor('#317082');
setSliderBgColor('#E2EBED');
setContentBgColor('#FFFFFF');
setScrollButtonSpeed(1);
setScrollTimer(5);
scrolldiv_setWidth(450);
scrolldiv_setHeight(400);
scrolldiv_initScroll();
</script>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-11-19

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

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索給一個Div層添加滾動條功能
特效說明：
層和布局模板-給一個Div層添加滾動條功能。

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

給一個Div層添加滾動條功能_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些