滚屏特效之基础篇:
将下面这段代码放入你网页的末尾(注意不能是开头,那样就看不到效果了):
〈SCRIPT
language="JavaScript"〉 window.scroll(0,100); 〈/SCRIPT>
如果这个网页中出现滚动条的话,那么打开时你就会发现:滚动条不像平时处于最顶端,而是距顶端有一小段的距离。这就是要实现滚屏的基础:用window对象的scroll方法改变滚动条的位置。其中的第一个参数为水平滚动条左端的位置(单位px),第二个为垂直滚动条顶端的位置(单位px)。
如果我们把这两个参数有规则的动态改变,那不就能实现滚屏了吗?比如使用简单的 FOR
循环,把下面这段代码加到网页的最后:
〈SCRIPT
language="JavaScript"〉 for
(I=1; I<=1000;
I++){ window.scroll(0,I); //将
for 循环中的 I 的值代入scroll
方法的第二个参数中来改变垂直滚动条的位置 } 〈/SCRIPT>
看到了吗?滚动条是不是在动。由于我们只需要网页的垂直滚动,因此就只改变第二个即垂直滚动条的参数,而将第一个参数设为0。
滚屏特效之进阶篇:
上面的代码虽然能够实现滚屏,但是速度好像太快了点,我可不是能够一目十行的人:)。那就们就需对上面的代码进行改进: 〈SCRIPT
language="JavaScript"〉 var
timer; var y =
0; //定义一个滚屏的函数 function
scrollwindow(){ window.scroll(0,y); y++; timer=setTimeout("scrollwindow()",
30); //每隔30毫秒执行一次
scrollwindow()函数,以此来实现参数 y
的递增 } 〈/SCRIPT>
这段代码就可以放到网页的任何位置了,不过建议放在 和
之间。再用 替换
。这次是不是慢多了呢?而且你可以将timer=setTimeout("scrollwindow()", 30)
中的30换成其它数字,就能改变速度了,数字越小速度越快。
滚屏特效之高级篇:
速度我们是能够控制了,而且无论多长的网页都能够从头到尾“将滚屏进行到底”。但是您发觉没有?就是一进入网页就立即开始滚动,这样就可能错过网页项端的精彩内容哦。还有就是滚屏中或滚屏后我们都不能改变滚动条的位置,这就不像在看网页了,到有点像看电视。我们还应当设计滚动:
〈SCRIPT
language="JavaScript"〉 var
currentpos,timer;
//开始滚动函数,执行后网页开始滚动 function
initialize(){ timer =
setTimeout("scrollwindow()",30); //每隔30毫秒执行一次
scrollwindow()
函数 } //停止滚动函数,执行该函数后停止网页滚动 function
stopscroll(){ clearInterval(timer); //清除setTimeout函数的句柄
timer,停止执行scrollwindow()
函数 } function
scrollwindow(){ currentpos =
document.body.scrollTop; //得到当前滚动条顶端位置,请注意
scrollTop
的大小写 window.scroll(0,++currentpos);
//将currentpos累加的值赋给scroll方法的第二个参数 if
(currentpos !=
document.body.scrollTop){ stopscroll(); //如果
currentpos的值不等于当前滚动条的位置,则停止网页滚动 }else{ initialize(); //否则继续网页的滚动 } } document.ondblclick
=
initialize; //双击左键执行initialize,网页开始滚动,注意这里不同于一般调动函数的方法,这里函数名后不能有括号 document.onmousedown
=
stopscroll; //单击左键停止网页的滚动 〈/SCRIPT>
这段代码就能实现,浏览者通过双击鼠标来开始滚屏,并通过单击来停止,而且滚动过程中,您可以随意拖动滚动条。当然了,您也可以单击某个按钮来开始滚屏,将这句加入网页适当位置:
就能实现。
滚屏特效之终极篇:
每个人的浏览速度都不同,我们到底将滚屏的速度设置成多快好呢?还是留给浏览者自己决定吧。用过“ReadBook”的朋友都知道,它的鼠标控制的无级变速滚屏非常人性化。其实我们网页中也能实现: 〈SCRIPT
language="JavaScript"〉 var
mousey, currentpos, timer;
function currentmousey()
{ mousey =
window.event.y;
//得到鼠标在网页中的Y坐标,请注意 event
的大小写
} function
initialize(){ timer =
setTimeout("scrollwindow()",mousey);
//用鼠标在网页中的Y坐标来决定执行scrollwindow()函数的频率,从而动态改变网页的滚动速度
} function
stopscroll(){ clearInterval(timer); } function
scrollwindow(){ currentpos =
document.body.scrollTop; window.scroll(0,++currentpos);
if (currentpos !=
document.body.scrollTop){ stopscroll(); }else{ initialize(); } } document.ondblclick
=
initialize; document.onmousedown
=
stopscroll; document.onmousemove
= currentmousey;
//当在网页上触了鼠标的移动事件,就运行currentmousey函数
〈/SCRIPT> 双击然后移动鼠标试试,当鼠标指针约靠近屏幕上端滚动速度就越快,反之则越慢。
|