http://bbs.iecn.net/read-html-tid-107540.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
#Content {
width:300px;
height:200px;
z-index:1;
overflow:hidden;
}
#Up,#Down{
cursor:hand;
}
#Bar{
position:absolute;
}
#Scroll{
position:absolute;
left:expression((body.clientWidth - this.offsetWidth)/2);
top:expression((body.clientHeight - this.offsetHeight)/2);
font-size:12px;
}
-->
</style>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" id="Scroll">
<tr>
<td id="a"><div id="Content">
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<p>第七段</p>
<p>第八段</p>
<p>第九段</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<p>第七段</p>
<p>第八段</p>
<p>第九段</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<p>第七段</p>
<p>第八段</p>
<p>第九段</p>
</div></td>
<td align="center" valign="top"><table height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="t_Up"><img src="Images/Up.gif" name="Up" width="20" height="25" id="Up"></td>
</tr>
<tr>
<td valign="top" id="t_Bar"><img src="Images/Bar.gif" name="Bar" width="20" height="100" id="Bar"></td>
</tr>
<tr>
<td id="t_Down"><img src="Images/Down.gif" name="Down" width="20" height="25" id="Down"></td>
</tr>
</table></td>
</tr>
</table></body>
</html>
<script language="javascript">
// JavaScript Document
var IE = document.all;
var currentpos,timer;
var Up = document.getElementById("Up");
var Bar = document.getElementById("Bar");
var Down = document.getElementById("Down");
var t_Up = document.getElementById("t_Up");
var t_Bar = document.getElementById("t_Bar");
var t_Down = document.getElementById("t_Down");
var Scroll = document.getElementById("Scroll");
var Content = document.getElementById("Content");
window.onload = function()
{
t_Up.style.height = Up.height;
t_Down.style.height = Down.height;
t_Bar.style.height = Content.offsetHeight;
Bar.height = ( Content.offsetHeight * t_Bar.offsetHeight ) / Content.scrollHeight;
Bar.style.top = ( Content.scrollTop * t_Bar.offsetHeight ) / Content.scrollHeight + Up.height;
// alert(Bar.offsetTop + "," + t_Bar.offsetTop);
// alert(Content.scrollHeight + "," + Content.offsetHeight)
}
function initialize()
{
timer = setInterval("scrollwindow('" + event.srcElement.id + "');",30);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow(id)
{
currentpos = Content.scrollTop;
if(id == "Up")
-- currentpos;
else
++ currentpos;
Content.scrollLeft = 0;
Content.scrollTop = currentpos;
// alert(Content.scrollTop);
Bar.style.top = ( Content.scrollTop * t_Bar.offsetHeight ) / Content.scrollHeight + Up.height;
// Bar.style.top = Bar.offsetTop + currentpos;
if (currentpos != Content.scrollTop)
sc();
}
Up.onmouseover = initialize;
Up.onmouseup = initialize;
Up.onmouseout = sc;
Down.onmouseover = initialize;
Down.onmouseup = initialize;
Down.onmouseout = sc;
document.ondblclick = initialize;
document.onmousedown = sc;
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
#Content {
width:300px;
height:200px;
z-index:1;
overflow:hidden;
}
#Up,#Down{
cursor:hand;
}
#Bar{
position:absolute;
}
#Scroll{
position:absolute;
left:expression((body.clientWidth - this.offsetWidth)/2);
top:expression((body.clientHeight - this.offsetHeight)/2);
font-size:12px;
}
-->
</style>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" id="Scroll">
<tr>
<td id="a"><div id="Content">
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<p>第七段</p>
<p>第八段</p>
<p>第九段</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<p>第七段</p>
<p>第八段</p>
<p>第九段</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<p>第七段</p>
<p>第八段</p>
<p>第九段</p>
</div></td>
<td align="center" valign="top"><table height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="t_Up"><img src="Images/Up.gif" name="Up" width="20" height="25" id="Up"></td>
</tr>
<tr>
<td valign="top" id="t_Bar"><img src="Images/Bar.gif" name="Bar" width="20" height="100" id="Bar"></td>
</tr>
<tr>
<td id="t_Down"><img src="Images/Down.gif" name="Down" width="20" height="25" id="Down"></td>
</tr>
</table></td>
</tr>
</table></body>
</html>
<script language="javascript">
// JavaScript Document
var IE = document.all;
var currentpos,timer;
var Up = document.getElementById("Up");
var Bar = document.getElementById("Bar");
var Down = document.getElementById("Down");
var t_Up = document.getElementById("t_Up");
var t_Bar = document.getElementById("t_Bar");
var t_Down = document.getElementById("t_Down");
var Scroll = document.getElementById("Scroll");
var Content = document.getElementById("Content");
window.onload = function()
{
t_Up.style.height = Up.height;
t_Down.style.height = Down.height;
t_Bar.style.height = Content.offsetHeight;
Bar.height = ( Content.offsetHeight * t_Bar.offsetHeight ) / Content.scrollHeight;
Bar.style.top = ( Content.scrollTop * t_Bar.offsetHeight ) / Content.scrollHeight + Up.height;
// alert(Bar.offsetTop + "," + t_Bar.offsetTop);
// alert(Content.scrollHeight + "," + Content.offsetHeight)
}
function initialize()
{
timer = setInterval("scrollwindow('" + event.srcElement.id + "');",30);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow(id)
{
currentpos = Content.scrollTop;
if(id == "Up")
-- currentpos;
else
++ currentpos;
Content.scrollLeft = 0;
Content.scrollTop = currentpos;
// alert(Content.scrollTop);
Bar.style.top = ( Content.scrollTop * t_Bar.offsetHeight ) / Content.scrollHeight + Up.height;
// Bar.style.top = Bar.offsetTop + currentpos;
if (currentpos != Content.scrollTop)
sc();
}
Up.onmouseover = initialize;
Up.onmouseup = initialize;
Up.onmouseout = sc;
Down.onmouseover = initialize;
Down.onmouseup = initialize;
Down.onmouseout = sc;
document.ondblclick = initialize;
document.onmousedown = sc;
</script>
浙公网安备 33010602011771号