神奇的页面滚动控制(二)
时间:2007-02-17 来源:PHP爱好者
作 者 : 甘冀平
function scrollpage() {
//页面滚动控制函数
status = '';
//okscroll与godown都是滚动状态标志,其值由指示器层的onmouseover与onmouseout2个事件控制。
//window.scrollBy(x,y)控制页面滚动,x、y分别表示横向与纵向滚动的距离,单位是象素px。
//当设置y值更大时,每次滚动的距离也将更大。
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
//页面滚动后,指示器已不再停留在我们期待的位置。所以,要再次执行移动函数移动它到屏幕的右下角。
//这样,看起来好像它总是在那里 ;-)
moveitem();
//设置滚动函数定时执行。这里的时间,表示了监测用户操作状态的周期,越小表示越精确,但程序也将
//更“忙”。设置得过于长,就会产生慢动作的延迟效果,好像计算机很迟钝,当我们将鼠标点到向下指示器
//时,屏幕并没有马上做出反应,而是等了一段时间,才向下滚动 ;-(
//根据你的需要,并进行测试,设置这个数值。
setTimeout('scrollpage()', 158);
}
//页面加载后,启动相关脚本函数
//设置页面加载后,首先启动init函数
window.onload=init;
//设置当窗口大小发生变换时启动的函数
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
// End -- >
</SCRIPT >
<BODY >
<!--用div标记定义一个层,从而可以在脚本程序中对它进行控制-->
<!--接着,给指示器图像添加2个事件,当它们发生时,分别设置相应的操作状态变量-->
<DIV id=item ><A onmouseover="okscroll=true; godown=true;"
onmouseout=okscroll=false href="javascript:void(0)" ><IMG
src="http://www.aspcool.com/lanmu/down.gif" border=0 ></A ><A
onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false
href="javascript:void(0)" ><IMG src="http://www.aspcool.com/lanmu/up.gif" border=0 ></A > </DIV >
<P >
<!--以下是页面内容,写得长一些,从而能看到操作效果-->
<CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >◆◆◆◆◆ End Here ◆◆◆◆◆
<P ></CENTER >
<P ></P ></BODY ></HTML >
演示效果
OK!看了上面的代码详细解读,你是否领会了其中的技巧?软件真是无所不能,是吗?
php爱好者站 http://www.phpfans.net php基础|php进阶|php模板.
function scrollpage() {
//页面滚动控制函数
status = '';
//okscroll与godown都是滚动状态标志,其值由指示器层的onmouseover与onmouseout2个事件控制。
//window.scrollBy(x,y)控制页面滚动,x、y分别表示横向与纵向滚动的距离,单位是象素px。
//当设置y值更大时,每次滚动的距离也将更大。
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
//页面滚动后,指示器已不再停留在我们期待的位置。所以,要再次执行移动函数移动它到屏幕的右下角。
//这样,看起来好像它总是在那里 ;-)
moveitem();
//设置滚动函数定时执行。这里的时间,表示了监测用户操作状态的周期,越小表示越精确,但程序也将
//更“忙”。设置得过于长,就会产生慢动作的延迟效果,好像计算机很迟钝,当我们将鼠标点到向下指示器
//时,屏幕并没有马上做出反应,而是等了一段时间,才向下滚动 ;-(
//根据你的需要,并进行测试,设置这个数值。
setTimeout('scrollpage()', 158);
}
//页面加载后,启动相关脚本函数
//设置页面加载后,首先启动init函数
window.onload=init;
//设置当窗口大小发生变换时启动的函数
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
// End -- >
</SCRIPT >
<BODY >
<!--用div标记定义一个层,从而可以在脚本程序中对它进行控制-->
<!--接着,给指示器图像添加2个事件,当它们发生时,分别设置相应的操作状态变量-->
<DIV id=item ><A onmouseover="okscroll=true; godown=true;"
onmouseout=okscroll=false href="javascript:void(0)" ><IMG
src="http://www.aspcool.com/lanmu/down.gif" border=0 ></A ><A
onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false
href="javascript:void(0)" ><IMG src="http://www.aspcool.com/lanmu/up.gif" border=0 ></A > </DIV >
<P >
<!--以下是页面内容,写得长一些,从而能看到操作效果-->
<CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >用JavaScript制作页面滚动效果
<P >◆◆◆◆◆ End Here ◆◆◆◆◆
<P ></CENTER >
<P ></P ></BODY ></HTML >
演示效果
OK!看了上面的代码详细解读,你是否领会了其中的技巧?软件真是无所不能,是吗?
php爱好者站 http://www.phpfans.net php基础|php进阶|php模板.
相关阅读 更多 +