文章自动滚屏的实现


这次我们来讲讲在制作电子图书中,如何来实现文章的自动滚屏。
  自动滚屏的引入是因为读者在阅读文章的时候,在阅读完文章的一段以后,不得不亲自动手用键盘或者鼠标来向下翻动页面,以便继续阅读。而我们引入了自动滚屏以后,就可以省去了不停的向下翻动的麻烦。
  自动翻页的原理很简单,使用几个简单的函数即可实现。下面我们就具体的讲解一下。
  我们在网上看到的自动翻页代码大多都是这种样子:
<script language="JavaScript">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",100);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>

  制作方法:
  在<body>标签下,粘贴代码:
<script language="JavaScript">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>
  请大家注意我在代码中使用不同颜色的几个地方:其中包括3个最主要的函数和1个最重要的参数以及2个关键的控制语句。我们的目的是这样的:当在页面上任意位置双击鼠标左键的时候,页面开始自动向下滚动,当在页面上单击鼠标左键的时候,自动滚屏停止。下面我们简单的讲解一下程序的执行过程:
  当双击鼠标左键的时候,语句“document.ondblclick”执行,调用函数“initialize”,在initialize函数中只有一个语句,起两个作用:第一,给timer变量赋值,第二,调用scrollwindow函数并传递速度参数。scrollwindow函数则担负起主要的滚屏操作,具体的语句因为篇幅所限我们在这里就不一一的解释了。因为语句都比较简单,使用的变量、操作也是JavaScript教常用的,大家看一下就会明白了。最后,当单击鼠标左键的时候,语句“document.onmousedown”执行,并调用“sc”函数,sc函数则用来清除滚屏操作,使用“clearInterval”来清除我们上面得到的“timer”变量值。至此,程序的一个执行周期全部完成。
  但是不知道您发现没有,虽然上述代码已经能够实现滚屏操作了,但是页面滚动的速度是一定的,那就是“100”,而对于不同的读者,阅读图书的速度也不一样,这样我们就需要给读者提供几种速度方式以供选择。那么怎样修改上面的代码呢?前面已经说到过,滚动的速度参数就是在initialize函数中setInterval函数的第二个参数,上面的代码默认是“100”,我们只要对这个参数使用不同的数值就可以实现不同的滚动速度了。好,下面我们就自己动手写一个函数来改变这个速度参数。
  在编写之前我需要说明的一点是:这个速度参数值越大,滚动的速度越慢,越小,则滚动的速度越快。请大家记住这一点。

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3