javascript代码，上下滚动页面

storein 2003-09-16 12:09:35

需要一个上下滚动页面的javascript代码，就是在页面的右下角有两个图片，当鼠标放到其中一个图片上时，页面往下滚动，放到另外一个上时，页面向上滚动，
这样的代码很多，我也找到了一些，可是我还有一个要求，页面滚动的速度随着鼠标放在图片上的时间增长而加快。不知道哪位有这样的代码，贴出来哈，谢谢！

...全文

456 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

storein 2003-09-17

打赏
举报

Tonglu(同路):
我需要的是按钮能够始终在有下角，我就是改的以下代码

<html>

<head>
<style type="text/css">
#item {position:absolute; visibility:hidden; left:0px;}
</style>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;

var speed = 1; //滚动速度

var oldspeed = speed; //记录初始速度
var UpTimer;
var DownTimer; //两个Timer

function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth-190;
w_y=(isNS)? window.innerHeight : document.body.clientHeight-10;
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',400);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-70;
item.pixelTop=w_y+document.body.scrollTop-50;
}
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,speed) : window.scrollBy(0,speed) ;
} else {
(isNS)? window.scrollBy(0,-speed) : window.scrollBy(0,-speed) ;
}
}
moveitem();
setTimeout('scrollpage()', 40);
}

function ScrollDown()
{
okscroll=true;
godown=true;
if (speed <20)
{
speed = speed + 2;
}

window.document.the_form.the_text.value = speed;
DownTimer= setTimeout('ScrollDown();', 1000); //一秒执行一次递加
}

function ScrollUp()
{
okscroll=true;
godown=false;
if (speed <20)
{
speed = speed + 2;
}

window.document.the_form.the_text.value = speed;
UpTimer= setTimeout('ScrollUp();', 1000); //一秒执行一次递加

}

function ResumeSpeed()
{
okscroll=false;
speed = oldspeed;
clearTimeout(UpTimer);
clearTimeout(DownTimer);
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>软件</title>
</head>

<body >

<div id="item" style="width: 300; height: 54">

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:void(0)" onMouseover="ScrollUp();" onMouseout="ResumeSpeed();" title="点击其他空白地方，停止滚动"><img src="../../images/up.gif" width="85" height="45" border="0"></a>
</td>
<td><a href="javascript:void(0)" onMouseover="ScrollDown();" onMouseout="ResumeSpeed();" title="点击其他空白地方，停止滚动"><img src="../../images/down.gif" width="85" height="45" border="0"></a>
</td>
<td> <a href="javascript:opener=null;window.close()" title="点击按纽，返回前一页"><img src="../../images/Close.gif" width="85" height="45" border="0"></a>
</td>
</tr>
</table>
</div>

加快

</body>
</html>

storein 2003-09-17

打赏
举报

我给我找的滚凭代码加上Timer后，的却可以实现我想要的功能，可是却有了其他的问题：
在屏幕右下角的“向上滚屏”，“向下滚屏”的图片按钮不停的跳动，弄的效果太糟糕了
这个好像就不好解决了

Tonglu 2003-09-16

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>局部滚动</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>.30pt1 {
COLOR: #ff66cc; FONT-FAMILY: 方正魏碑繁体; FONT-SIZE: 20pt
}
.30pt2 {
COLOR: #de3076; FONT-FAMILY: 创艺繁琥珀; FONT-SIZE: 30pt
}
</STYLE>

<SCRIPT language=JavaScript>

</SCRIPT>

<META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD>
<BODY>
<DIV style="LEFT: 320px; POSITION: absolute; TOP: 0px">
<P><FONT class=30pt2><BR><BR><BR><BR>这是页面局部的上下滚动</FONT> </P></DIV></BODY></HTML>

Tonglu 2003-09-16

打赏
举报

其实也不难给你段代码自己改吧
<html>
<head>
</head>
<body>
<script language="JavaScript">

</script>
<input type=button value="向下滚屏" onClick="scrollit()" name="button">
<input type=button value="向上滚屏" onClick="scrollit1()" name="button2">
</p>
</body>
</html>

storein 2003-09-16