做网站常用的网页滚动特效
2015-08-20 09:18:45 来自:admin
在进行网站建设过程中，经常会遇到客户想要让首页的内容能够动起来，以增加网站的动感，今天天博网小编为大家总结几种常用的网页滚动特效代码，希望可以帮助大家。
滚屏特效之基础篇：
将下面这段代码放入你网页的末尾（注意不能是开头，那样就看不到效果了）：
〈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>
双击然后移动鼠标试试，当鼠标指针约靠近屏幕上端滚动速度就越快，反之则越慢。
网页滚动特效基本上都是大同小异的，想要什么样的效果进行简单的修改就可以了，但是天博网奉劝大家，在首页面中尽量不要使用太多特效，不然会影响首页的加载时间，一味的追求效果而影响网站打开速度就得不偿失了。