JS用div层实现的滚动条代码_网页代码站(www.webdm.cn)

您的当前位置：网页代码站 >> 层和布局 >> JS用div层实现的滚动条代码
JS用div层实现的滚动条代码

分类：层和布局时间：2010-08-29 点击：
关键词：JS|css|网页代码|代码|
<!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>
		<title>JS用div层实现的滚动条代码 - www.webdm.cn</title>
<style>
BODY {text-align:center;}
td{font-size: 12px;line-height: 18px;text-align:left;}
#excerpts {
	BORDER-RIGHT: #bebebe 1px solid; BORDER-TOP: #bebebe 1px solid; Z-INDEX: 9; VISIBILITY: hidden; BORDER-LEFT: #bebebe 1px solid; BORDER-BOTTOM: #bebebe 1px solid;POSITION: absolute;
}
</style>
<script>
var mouseX = mouseY =0;

//returns height, width and other window information
//works in NS6 and IE5(Mac/Win)

function screenObject()
	{

	this.bottom = function(){
		if (document.body.scrollHeight) return document.body.scrollHeight};
	
	this.height = function() {
		if (document.body.offsetHeight) return document.body.offsetHeight;}
	
	this.visHeight = function() {
		if (window.innerHeight) return window.innerHeight;
		if (document.body.clientHeight) return document.body.clientHeight;}
	
	this.width = function() {
		if (document.body.offsetWidth) return document.body.offsetWidth;}
	
	this.scrollTop = function() {
		if(document.body.scrollTop) return document.body.scrollTop
		if (window.pageYOffset) return window.pageYOffset;
		else return 0;};
	}

function mousePosition(e)
	{
	if (e) event = e;   //for Netscape
	mouseX = event.clientX;
	mouseY = event.clientY;
	}
	
//resize the clippings container	
function windowResize()
	{
	clippingsSetContainerHeight()
	}
// custom scroll application developed for three.oh 3/2001.
// i'd say copyright, but i know it wouldn't stop you... so have at it...
// thanks to brandon (www.jesterworld.net) and grant (no site cuz he's too pimp for it) for the help w/ the visuals.
// > youngpup > www.youngpup.net
// optimized for the latest version of {3.0} by bob

ThreeOhScroll.mo5 = navigator.userAgent.indexOf("Gecko") != -1
ThreeOhScroll.ie5 = navigator.appName == "Microsoft Internet Explorer" && document.getElementById

ThreeOhScroll.aniLen = 250

function ThreeOhScroll(id)
{
	if (ThreeOhScroll.mo5 || ThreeOhScroll.ie5) {
		this.id = id
		this.getMembers(document.getElementById(id))

		this.clipH		= parseInt(this.container.style.height)
		this.PTags		= this.content.getElementsByTagName("P")
		var lastP		= this.PTags[this.PTags.length-1];
		var lastPTop	= lastP.offsetTop - (ThreeOhScroll.mo5 ? 108 : 0);
		this.docH		= lastPTop + Math.max(lastP.offsetHeight, this.clipH)
		this.scrollH	= this.docH - this.clipH
		this.markersMax	= parseInt(this.markers.style.height) - 7
		this.thumbMax	= parseInt(this.thumbContainer.style.height) - this.thumbImg.height
		this.arrowMax	= parseInt(this.arrowContainer.style.height) - this.arrowImg.height

		this.gRef = "ThreeOhScroll_"+id
		eval(this.gRef+"=this")
		this.thumb.obj	= this
		this.thumb.onmousedown = this.startDrag
		this.thumb.onmouseover = Function(this.gRef + ".toggleThumb(1)")
		this.thumb.onmouseout  = Function(this.gRef + ".toggleThumb(0)")
		this.thumb.onmousup	   = Function(this.gRef + ".toggleThumb(0)")
		this.thumb.ondragstart = function() { return false }
		this.initMarkers()
	}
}

ThreeOhScroll.prototype.initMarkers = function() {
	var shtml = "", sTitle, iTop
	for (var i = 0; i < this.PTags.length; i++) {
		sTitle	= this.PTags[i].getAttribute("description")
		pTop	= this.PTags[i].offsetTop - (ThreeOhScroll.mo5 ? 108 : 0)
		iTop	= Math.round(pTop * this.markersMax / this.scrollH)
		if (sTitle && sTitle != "" && sTitle != null) {
			shtml  += "<div id='" + this.id + "_marker_" + i + "' "
			shtml  += "style='position:absolute; left:2px; top:" + (iTop + 2) + "px; "
			shtml  += "width:5px; height:3px; clip:rect(0 5 3 0); background-color:#CCCCCC; z-index:3;'></div>"
			shtml  += "<div style='position:absolute; left:0px; top:" + iTop + "px; "
			shtml  += "cursor:pointer; cursor:hand; width:9px; height:7px; clip:rect(0 9 7 0); z-index:4;' " 
			shtml  += "onmousedown='" + this.gRef + ".scrollTo(" + pTop + ")' "
			shtml  += "onmouseover='" + this.gRef + ".toggleMarker(this, " + i + ", 1)' "
			shtml  += "onmouseout='" + this.gRef + ".toggleMarker(this, " + i + ", 0)' "
			shtml  += "description='" + sTitle.replace(/'/g, "|pos|") + "'>"
			shtml  += "<img src='imgs/ui/1.gif' width='9' height='7'></div>"
		}
	}
	this.markers.innerHTML += shtml
}
// this is so that we only loop through the descendant tree looking for elements one time - it loads faster!
ThreeOhScroll.prototype.getMembers = function(a) {
	this.container=document.getElementById('ypContainer');
	this.content=document.getElementById('ypContent');
	this.markers=document.getElementById('ypMarkers');
	this.thumb=document.getElementById('ypThumb');
	this.arrow=document.getElementById('ypArrow');
	this.thumbImg=document.getElementById('ypThumbImg');
	this.arrowImg=document.getElementById('ypArrowImg');
	this.thumbContainer=document.getElementById('ypThumbContainer');
	this.arrowContainer=document.getElementById('ypArrowContainer');
	this.description=document.getElementById('ypDescription');
	this.descArrow=document.getElementById('ypDescArrow');
}

ThreeOhScroll.prototype.startDrag = function(e) {
	if (!e) e = window.event
	var ey = e.pageY ? e.pageY : e.y
	this.dragLastY = ey
	this.dragStartOffset = ey - parseInt(this.style.top)
	ThreeOhScroll.current = this.obj
	document.onmousemove = this.obj.doDrag
	document.onmouseup = this.obj.stopDrag
	if (this.obj.aniTimer) window.clearInterval(this.obj.aniTimer)
	return false;
}

ThreeOhScroll.prototype.doDrag = function(e) {
	if (!e) e = window.event
	var obj = ThreeOhScroll.current
	var ey = (e.pageY ? e.pageY : e.y)
	var dy = ey - obj.thumb.dragLastY
	var ny = parseInt(obj.thumb.style.top) + dy
	if (ny >= obj.thumbMax) obj.thumb.dragLastY = obj.thumbMax + obj.thumb.dragStartOffset
	else if (ny < 0) obj.thumb.dragLastY = obj.thumb.dragStartOffset
	else obj.thumb.dragLastY = ey
	ny = Math.min(Math.max(ny, 0), obj.thumbMax)
	obj.jumpTo(ny * obj.scrollH / obj.thumbMax)
	return false;
}

ThreeOhScroll.prototype.stopDrag = function() {
	this.onmousemove = null
	this.onmouseup   = null
	ThreeOhScroll.current.toggleThumb(0)
}

ThreeOhScroll.prototype.scrollTo = function(ny) {
	this.endArrow = Math.round(ny * this.markersMax / this.scrollH)
	this.startTime = (new Date()).getTime()
	this.startPos = parseInt(this.content.style.top) * -1
	this.endPos = ny
	this.dist = this.endPos - this.startPos
	this.accel = this.dist / ThreeOhScroll.aniLen / ThreeOhScroll.aniLen
	if (this.aniTimer) this.aniTimer = window.clearInterval(this.aniTimer)
	this.aniTimer = window.setInterval(this.gRef + ".scroll()", 10)
}

ThreeOhScroll.prototype.scroll = function() {
	var now = (new Date()).getTime()
	var elapsed = now - this.startTime
	if (elapsed > ThreeOhScroll.aniLen) this.endScroll()
	else {
		var t = ThreeOhScroll.aniLen - elapsed
		var ny = this.endPos - t * t * this.accel
		this.jumpTo(ny)
	}
}

ThreeOhScroll.prototype.endScroll = function() {
	this.jumpTo(this.endPos)
	this.arrow.style.top = this.endArrow
	this.aniTimer = window.clearInterval(this.aniTimer)
}

ThreeOhScroll.prototype.jumpTo = function(ny) {
	this.thumb.style.top	= Math.round(ny * this.thumbMax / this.scrollH)
	this.arrow.style.top	= Math.round(ny * this.arrowMax / this.scrollH)
	this.content.style.top	= -ny
}

ThreeOhScroll.prototype.toggleMarker = function(oTrigger, markerNum, bOn) {
	if (bOn) {
		document.getElementById(this.id + "_marker_" + markerNum).style.backgroundColor = "#444444"
		if (this.curMarker) this.toggleMarker(this.curMarker, 0)
		this.curMarker = markerNum
		this.descArrow.style.top = parseInt(oTrigger.style.top) + 2 + "px"
		this.description.style.left = "-400px"
		this.description.style.top = "-400px"
		this.description.innerHTML = oTrigger.getAttribute("description").replace(/\|pos\|/g, "'")
		var w = this.description.offsetWidth
		this.description.style.left = 259 - w + "px"
		this.description.style.top = parseInt(oTrigger.style.top) - 1 + "px"
		this.description.style.visibility = "visible"
		this.descArrow.style.visibility = "visible"
		this.container.style.left = "0px"
	} else {
		document.getElementById(this.id + "_marker_" + markerNum).style.backgroundColor = "#cccccc"
		this.curMarker = 0
		this.description.style.visibility = "hidden"
		this.descArrow.style.visibility = "hidden"
	}
}

ThreeOhScroll.prototype.toggleThumb = function(bOn) {
	//this.arrow.style.backgroundColor = this.thumb.style.backgroundColor = bOn ? "#7CDAFE" : "#5EBBE7"
}

function ypGetChildNodes(objParent) {
	return (objParent.childNodes ? objParent.childNodes : objParent.children)
}
/*

summary 
- - - - -
script handles all clipping functionality
this is a stripped down version of the IHT clippings code
the primary difference is the removal of animation code which I am not that happy with

+  Add to Clippings
+  Link to Clipping
+  Update Clipping as read
+  Remove Clipping(s)
+  Save Clippings

*/

allClippings = new Array();  //all Clippings on page
activeClippings = new Array() //all Clippings stored by the user
currentClipping = 0; //where in the list of Clippings is the user
clippingsDivArray = new Array(); //array of all clipping divs on the page, used to find duplicates
cookiesOn = false; //used to make sure cookies are enabled

//this method needs to be called to initialize the clippings
function initClippings()
	{
	createPageClippingsArray()
	loadClippings();
	setClippingsVisibility();		
	updateClippingCounter();
	drawClippings();
	}	



//clipping class
function Clipping(id,headline,URL, read)
	{
	this.id = id;
	this.headline = headline;
	this.URL = URL;
	this.read = read;
	this.clicked = markRead;
	}


//get Clippings from a cookie
function loadClippings()
	{
	clippingsString = null;
	tempArray = document.cookie.split(";");
	x = -1;
		
		for (tA = 0; tA < tempArray.length; tA++)
			{
			if (tempArray[tA].indexOf('clippings=') > -1) //found the clippings section
				{
				tPos = tempArray[tA].indexOf("=")+2;
				clippingsString = tempArray[tA].substring(tPos,tempArray[tA].length); //striping out "clippings=^"
				}
			
			}
	if (clippingsString != null)
		{		
		tempArray = clippingsString.split("^");
		if (tempArray.length > 1)
		{
		x=0;
		for (i=0; i < tempArray.length/4; i++)
			{
			//add the id, name, url, readstate
			activeClippings[i] = new Clipping(tempArray[x],tempArray[x+1],tempArray[x+2],tempArray[x+3])
			x=x+4;
			}}
		}
	}

//saves clippings to cookie	
function saveClippings()
	{
	tempCookie = "clippings=";
	for(i=0; i < activeClippings.length; i++)
		{
		tempCookie=tempCookie+"^"+(activeClippings[i].id)+"^"+(activeClippings[i].headline)+"^"+(activeClippings[i].URL)+"^"+(activeClippings[i].read);
		}
		var expire = new Date ();
   		expire.setTime (expire.getTime() + (6 * 24 * 3600000)); //expires in 6 days from users clock
   		expire = expire.toGMTString();
	finalCookie = tempCookie+"; path=/; expires="+expire;  	
  	document.cookie = finalCookie;
	}


// detects wether cookies are turned on or not
function eventCheckForCookies()
	{
	document.cookie = "cookies=on";
  	
  	checkForCookie = document.cookie.split(";");
  	
  		for (x=0; x < checkForCookie.length; x++)
  			{
  			if (checkForCookie[x].indexOf("cookies") >= 0) {cookiesOn = true;}
  			}
  		if (cookiesOn == false) alert("You will need to enable\ncookies to use Clippings.");
	}


//marks a clipping read
function markRead(id)
	{
	if (!id) id = this.id.substring(5,this.id.length);
	for (i=0; i < activeClippings.length; i++)
		{
		if (activeClippings[i].id == id) activeClippings[i].read = "yes";
		}
		
	//refresh the container
	drawClippings();
	}	

//loads the url of the clipping
function loadClippingURL(pos)
	{
	markRead(activeClippings[pos].id);
	n = open(activeClippings[pos].URL,"win"+activeClippings[pos].id);
	}

//load next unread clipping in array
function eventShowNextClipping()
	{
	if (activeClippings != null) 
		{
		total = 0;
		for (aC = 0; aC < activeClippings.length; aC++)
			{
			if (activeClippings[aC].read != "yes") 
				{
				loadClippingURL(aC);
				updateClippingCounter();
				saveClippings();
				break;
				}
			}
		}
	}

//removes all read clippings	
function eventClearReadClippings()
	{
	tempClippings = new Array()
	x = 0;
	for (i=0; i < activeClippings.length; i++)
		{
		if (activeClippings[i].read != "yes") {tempClippings[x] = activeClippings[i]; x++}
		}
	activeClippings = tempClippings;
	drawClippings();
	setClippingsVisibility();	
	updateClippingCounter();
	saveClippings();
	}

//removes all clippings	
function eventClearAllClippings()
	{
	activeClippings = new Array();
	drawClippings();
	setClippingsVisibility();	
	updateClippingCounter();
	saveClippings();
	}

//creates the HTML for the clippings menu when a clipping is added
//removed create element and used innerHTML instead
function drawClippings()
	{
	newHTML = "";
	
	//draw this text if there are no clippigns
	if (activeClippings.length < 1) 
		{
		newHTML = "<span class='clippingItem'>There are currently no Excerpts saved.<br>To add an Excerpt click on the <SPAN class='clippingIcon'>+</SPAN> next to a link.<br><br></span>";
//		newHTML += "You can access your Excerpts either through this menu, or clicking on the number to the right of the Excerpts menu.  That number represents unread Excerpts."
		}
	
	for (i=0; i < activeClippings.length; i++)
		{
		clipping = activeClippings[i];
		
		if (clipping.read == "yes") tClass = "clippingItemRead";
		else tClass = "clippingItem";

		newHTML += "<a href=\"javascript:loadClippingURL("+i+")\" class='"+tClass+"' id='cLink"+clipping.id+"'>";
		newHTML += clipping.headline+"</a>";
		
		}
		
	obj = document.getElementById("clippingsContainer");
	obj.innerHTML = newHTML;
	
	//make sure that the clippings container does not go off screen
	clippingsSetContainerHeight();
	}


//sets the height of the clippings container, make sure it does not go off screen
function clippingsSetContainerHeight()
	{
	obj = document.getElementById("clippingsContainer");
	obj.style.height= Math.round(userScreen.visHeight()/2)+"px";
	}


//make sure there is no other record of that clipping in use
function checkForDuplicates()
	{
	for (i=0; i < activeClippings.length; i++)
		{
		if (newClipping == activeClippings[i].id) {i = allClippings.length; duplicate = true;}
		}
	}


//creates array of all clippings on page
//having this array helps speed things up on the mac
function createPageClippingsArray()
	{
		d = document.getElementsByTagName("SPAN")
		for (j=0; j < d.length; j++) if (d[j].id.indexOf("clp") > -1) 
			{
			clippingsDivArray[clippingsDivArray.length] = d[j];
			}
	 }

//finds duplicate clippings on a page
function clippingInstanceVisibility(id,state)
	{
	t = document.getElementsByName(id);
	if(t.length > 0)
		{
		for (j=0; j < t.length; j++) 
			{
			t[j].style.visibility = state;
			t[j].onclick = addClipping;
			}
		}
	else {
	 	d = clippingsDivArray;
  		{
		for (j=0; j < d.length; j++) if (d[j].id == id) 
			{
			d[j].style.visibility = state;
			d[j].onclick = addClipping;
			}
		}
		}		
	}
	
//sets the visibility and events for an object;	
function setClippingsVisibility()
	{
	
	for (i=0; i < allClippings.length; i++)
		{
		vis = "visible";
		
		//find if this clipping is already selected
		for (x=0; x <activeClippings.length; x++) if (allClippings[i].id == activeClippings[x].id) vis = "hidden";
			obj = "clp"+allClippings[i].id;
			clippingInstanceVisibility(obj,vis)
			}
			
		}

//this event is triggered when a clipping is clicked 
function addClipping()
	{
	newClipping = this.id.substring(3,this.id.length)
	duplicate = false;
	for (i=0; i < allClippings.length; i++) //find the position the allClippings array of the selected clipping
		{
		if (newClipping == allClippings[i].id) {pos = i; i = allClippings.length}
		}
		
	if (activeClippings.length > 0)	checkForDuplicates() //make sure clipping is not already seletected
	
	if (!duplicate)
	{	
		eventCheckForCookies();
		if (cookiesOn == true)
			{
			activeClippings[activeClippings.length] = new Clipping(allClippings[pos].id,allClippings[pos].headline,allClippings[pos].URL);
			
			//find all instances of the clipping in article and hides it
	 		clippingInstanceVisibility(this.id,'hidden') 
	 		
	 		drawClippings();	
	 		event.cancleBubble = true;
	 		updateClippingCounter();
			saveClippings();
		 	}
	 	}
	}


//sets the number of unread clippings
function updateClippingCounter()
	{
	if (activeClippings != null) 
		{
		total = 0;
		for (aC = 0; aC < activeClippings.length; aC++)
			{
			if (activeClippings[aC].read != "yes") total++
			}
		}
	obj = document.getElementById("clippingsCounter");
	obj.innerHTML = "<a href=\"javascript:eventShowNextClipping()\">unread excerpts: "+total+"</a><br><br>";
	}	





</script>
	</head>
<body onLoad="init();">
          <script type=text/javascript><!-- 
		// aren't object literals fun?
		var jobs = {
			list	: ["jD15","jD14","jD13","jD11","jResults","jApply","jArchive"],
			toggle	: function(n) {
						for (var i = 0; i < this.list.length; i++) this.list[i] == n ? show(n) : hide(this.list[i])
					  }
		}
		// why yes, they are.
		function init()
		{		
		//fix for differences in how IE and Netscape setAttribute to the class property
		if (document.all) classFix = "className";
		else classFix = "class";
		
		//create a screen object, handles height, width of the screen
		userScreen = new screenObject(); 
		
		//in window.js
		window.onresize = windowResize;
		
		initClippings();
		new ThreeOhScroll('filter');
		}
		function openExcerpts() {
			show('excerpts');
			show('div_browse');
			hide('div_email');
			document.onclick = closeExcerpts
		}

		function closeExcerpts(e) {
			if (!e) e  = window.event

			var oEl    = e.originalTarget ? e.originalTarget : e.srcElement

			//cancel if the src element was within the excerpts div
			while (oEl != document.body) {
				if (oEl.id == "excerpts") return true
				oEl = oEl.parentNode ? oEl.parentNode : oEl.parent
			}

			hide('excerpts')
			hide('div_browse')
			hide('div_email')
			document.onclick = new Function()
		}

		function toggleExcerpts() {
			YY_TogLay('div_browse')
			YY_TogLay('div_email')
		}
		function jobPost() {
			hide('jApply');	
			document.all.jobform.submit();
		}
		// -->
          </script>
          <p align="center"></p>
          <p align="center"><br /><br /><center><script src="/js/tj.js"></script></center></p>
          <table width="292" height="205" border="0" cellpadding="0" cellspacing="0" bgcolor="#F4F4F4">
  <tr>
    <td valign="top">
      <div id="alltop" style="position:absolute; &gt;
          &lt;div class=ThreeOhScroll id=filter 
style=;"z-index: 2; width: 284px; position: absolute; height: 190px">
        <div class=scrollBar id=ypScrollBar 
style="LEFT: 274px; WIDTH: 23px; POSITION: absolute; HEIGHT: 90px; top: 0px;">
          <div class=thumbContainer id=ypThumbContainer 
style="Z-INDEX: 3; LEFT: 5px; WIDTH: 11px; POSITION: absolute; TOP: 0px; HEIGHT: 185px">
            <div class=thumb id=ypThumb 
style="POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ffd200; left: 2px;"><img 
class=thumbImg id=ypThumbImg height=50 src="http://www.webdm.cn/images/20100829/thumb.gif" 
width=9></div>
          </div>
          <div class=arrowContainer id=ypArrowContainer 
style="Z-INDEX: 4; LEFT: 1px; WIDTH: 5px; POSITION: absolute; TOP: 0px; HEIGHT: 185px">
            <div class=arrow id=ypArrow style="POSITION: absolute"><img class=arrowImg 
id=ypArrowImg height=7 src="http://www.webdm.cn/images/20100829/arrow.gif" width=4></div>
          </div>
          <div class=markers id=ypMarkers 
style="WIDTH: 15px; POSITION: absolute;  HEIGHT: 82px; left: 4px;"></div>
        </div>
        <div class=description id=ypDescription 
style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 9px; Z-INDEX: 5; VISIBILITY: hidden; PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: geneva, tahoma, arial; POSITION: absolute; BACKGROUND-COLOR: white"></div>
        <div class=descArrow id=ypDescArrow 
style="Z-INDEX: 6; LEFT: 258px; VISIBILITY: hidden; WIDTH: 4px; CLIP: rect(0px 4px 7px 0px); POSITION: absolute; TOP: 2px; HEIGHT: 7px"><img 
height=7 src="http://www.webdm.cn/images/20100829/description.gif" width=4></div>
        <div class=container id=ypContainer 
style="OVERFLOW: hidden; WIDTH: 284px; CLIP: rect(0px 500px 500px 0px); POSITION: absolute; HEIGHT: 185px; left: 6px; top: 0px;">
          <div class=content id=ypContent style="POSITION: absolute; TOP: 2px; left: 6px; width: 275px;">
            <table width="259" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td height="20" bgcolor="#CCCC33"><img src="http://www.webdm.cn/images/20100829/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="/" target="_blank">2010/10/10  - 网页代码站</a></span></td>
              </tr>
              <tr>
                <td height="32" style="padding:5px 0 5px 0"> 　　<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</td>
              </tr>
            </table>
            <table width="259" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td height="20" bgcolor="#CCCC33"><img src="http://www.webdm.cn/images/20100829/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="/" target="_blank">2010/10/10  - 网页代码站</a></span></td>
              </tr>
              <tr>
                <td height="32" style="padding:5px 0 5px 0"> 　　<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</td>
              </tr>
            </table>
            <table width="259" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td height="20" bgcolor="#CCCC33"><img src="http://www.webdm.cn/images/20100829/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="/" target="_blank">2010/10/10  - 网页代码站</a></span></td>
              </tr>
              <tr>
                <td height="32" style="padding:5px 0 5px 0"> 　　<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</td>
              </tr>
            </table>
            <table width="259" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td height="20" bgcolor="#CCCC33"><img src="http://www.webdm.cn/images/20100829/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="http://www.webdm.cn/" target="_blank">2010/10/10  - 网页代码站</a></span></td>
              </tr>
              <tr>
                <td height="32" style="padding:5px 0 5px 0"> 　　<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</td>
              </tr>
            </table>
            <table width="259" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td height="20" bgcolor="#CCCC33"><img src="http://www.webdm.cn/images/20100829/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="http://www.webdm.cn/" target="_blank">2010/10/10  - 网页代码站</a></span></td>
              </tr>
              <tr>
                <td height="32" style="padding:5px 0 5px 0"> 　　<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</td>
              </tr>
            </table>
            <table width="259" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td height="20" bgcolor="#CCCC33"><img src="http://www.webdm.cn/images/20100829/arr.gif" width="14" height="5"><span style="padding:5px 0 5px 0"> <a href="http://www.webdm.cn/" target="_blank">2010/10/10  - 网页代码站</a></span></td>
              </tr>
              <tr>
                <td height="32" style="padding:5px 0 5px 0"> 　　<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</td>
              </tr>
            </table>
            <p><!--此处换行符删掉会出错,而且底部有一定高度的空行,这是这个效果的BUG,目前还未解决.--> 

	
          </div>
        </div>
      </div>
    </div>
	
	<div id=excerpts style="WIDTH: 324px; HEIGHT: 365px">
          <div id=div_browse>
            <div id=list>
              <div id=clippingsCounter></div>
              <div id=clippingsContainer></div>
            </div>
          </div>
     </div>	
	
	</td>
  </tr>
</table>


</body>
</html>
运行代码全选代码复制代码保存代码友情提示
JS用div层实现的滚动条代码
一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。
运行代码方式：
1、点击“复制”按钮；
2、在桌面建立一个txt文档；
3、粘贴复制的代码；
4、最后把txt的扩展名改为“htm”或“html”；
5、完成，打开即可看到效果。

二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！

三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！

四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！
来顶一下
上一篇：竖向图片滚动JavaScript封装版，无jQuery
下一篇：JavaScript后退、刷新、前进按钮