-
模拟滚动条效果
<script language="javascript">
/************************
* Simulate Scroll Bar
* Author: Zhong@IECN
* E-mail: <a href="mailto:zz315@163.com">[email]zz315@163.com[/email]</a>
* 09/24/2004
************************/
var scrollInterval = 10;
var scrollHeight = 170; //高度,注意如果修改这个值,table中也要相应的修改
var scrollTimer;
var scrollBtn;
var mouseInit;
var slideInit;
function uncScroll(oBtn, nStep)
{
var content = oBtn.parentNode.parentNode.parentNode.parentNode.parentNode.previousSibling.childNodes[0].childNodes[0];
var slide = oBtn.parentNode.parentNode.parentNode.rows[1].cells[0].childNodes[0];
var h = content.clientHeight;
if (h <= scrollHeight)
return;
content.style.pixelTop += nStep;
if (content.style.pixelTop > 0)
content.style.pixelTop = 0;
if (content.style.pixelTop+h < scrollHeight)
content.style.pixelTop = scrollHeight - h;
var m = -content.style.pixelTop*(slide.parentNode.clientHeight-slide.clientHeight)/(h-scrollHeight);
slide.style.marginTop = m + "px";
}
function uncSlide(oSlide)
{
var content = oSlide.parentNode.parentNode.parentNode.parentNode.parentNode.previousSibling.childNodes[0].childNodes[0];
var h = content.clientHeight;
if (h <= scrollHeight)
return;
var m = slideInit + (event.y - mouseInit);
if (m < 0)
m = 0;
if (m > oSlide.parentNode.clientHeight-oSlide.clientHeight)
m = oSlide.parentNode.clientHeight-oSlide.clientHeight;
oSlide.style.marginTop = m + "px";
content.style.pixelTop = -m*(h-scrollHeight)/(oSlide.parentNode.clientHeight-oSlide.clientHeight);
}
</script>
<script for="scrollUp" event="ondragstart">
return false;
</script>
<script for="scrollUp" event="onmousedown">
setCapture();
scrollBtn = this;
scrollTimer = setInterval("uncScroll(scrollBtn, 2)", scrollInterval);
</script>
<script for="scrollUp" event="onmouseup">
clearInterval(scrollTimer);
releaseCapture();
</script>
<script for="scrollDown" event="ondragstart">
return false;
</script>
<script for="scrollDown" event="onmousedown">
setCapture();
scrollBtn = this;
scrollTimer = setInterval("uncScroll(scrollBtn, -2)", scrollInterval);
</script>
<script for="scrollDown" event="onmouseup">
clearInterval(scrollTimer);
releaseCapture();
</script>
<script for="scrollSlide" event="ondragstart">
return false;
</script>
<script for="scrollSlide" event="onmousedown">
setCapture();
slideInit = parseInt(this.style.marginTop);
mouseInit = event.y;
</script>
<script for="scrollSlide" event="onmousemove">
if (event.button)
uncSlide(this);
</script>
<script for="scrollSlide" event="onmouseup">
releaseCapture();
</script>
<table cellpadding="0" cellspacing="0" style="143px;height:170px;table-layout:fixed;">
<tr>
<td rowspan=3 bgcolor="#EEEEEE" valign="top">
<div style="100%;height:170px;overflow:hidden;position:absolute;">
<div style="position:absolute;left:0px;top:0px;overflow:visible;">
<!-- 内容部分 Begin -->
Begin<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
End<br>
<!-- 内容部分 End -->
</div>
</div>
</td>
<td width="12" background="p_w_picpaths/scroll_bg.gif">
<table cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td height="12"><img src="p_w_picpaths/scroll_up.gif" width="12" height="12" id="scrollUp"></td>
</tr>
<tr>
<td valign="top"><img src="p_w_picpaths/scroll_slide.gif" width="12" height="16"
id="scrollSlide" style="margin-top:0px;"></td>
</tr>
<tr>
<td height="12"><img src="p_w_picpaths/scroll_down.gif" width="12" height="12" id="scrollDown"></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<!-- 如果多个,只要复制Table部分就可以了 -->
<table cellpadding="0" cellspacing="0" style="143px;height:170px;table-layout:fixed;">
<tr>
<td rowspan=3 bgcolor="#EEEEEE" valign="top">
<div style="100%;height:170px;overflow:hidden;position:absolute;">
<div style="position:absolute;left:0px;top:0px;overflow:visible;">
<!-- 内容部分 Begin -->
Begin<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
End<br>
<!-- 内容部分 End -->
</div>
</div>
</td>
<td width="12" background="p_w_picpaths/scroll_bg.gif">
<table cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td height="12"><img src="p_w_picpaths/scroll_up.gif" width="12" height="12" id="scrollUp"></td>
</tr>
<tr>
<td valign="top"><img src="p_w_picpaths/scroll_slide.gif" width="12" height="16"
id="scrollSlide" style="margin-top:0px;"></td>
</tr>
<tr>
<td height="12"><img src="p_w_picpaths/scroll_down.gif" width="12" height="12" id="scrollDown"></td>
</tr>
</table>
</td>
</tr>
</table>
-
相关阅读:
(九)MySQL用户和权限管理
activemq修改admin密码
zookeeper与activemq整合
(十一)数组array
(十)while和until循环
(八)MySQL索引操作
查看MySQL是否在运行
MySQL的启动和关闭
常用的Web服务器软件整理
[CodeForce 801A] Vicious Keyboard
-
原文地址:https://www.cnblogs.com/zzh/p/1393966.html
Copyright © 2020-2023
润新知