scrollover21.gif为了让大家明白这是一个怎样的效果,首先给个例子:DiggLife.鼠标悬停到前面的链接,看看有什么变化.如果你用RSS阅读器是无法看到效果的,所以阅读器里的标题给我增加点点击率吧.(添加了GIF图片,应该能够看到)

这个效果就叫做Scrollover.下面介绍一下实现方法.

1.复制以下一段Js代码到你的页面,或者你可以直接下载这段JS代码并上传到你的网站.

2.复制以下一段样式代码到你的CSS代码或者页面里.其中颜色可以任意改变.

3.做完这些就可以使用下面的代码实现链接滚动效果了.

链接文字

注:

如果你使用的上传JS代码的方式,还可以将它更加个性化一点.

var scrollovers_TypeName = 'scrollover';
var scrollovers_StartScrollLocation = 0;
var scrollovers_EndScrollLocationTrim = 0;
var scrollovers_ScrollSpeed = 3;
var scrollovers_ScrollDownOnMouseOver = true;

上面是该JS代码的开头部分.

1.如果你希望对所有链接都使用滚动效果,而不用每次都添加样式参数,可以将第一行的scrollovers_TypeName参数设置为空字符窜,也就是将引号内的scrollover去掉.

2.如果你希望滚动由下至上,可以把scrollovers_ScrollDownOnMouseOver设置为false.

3.通过更改scrollovers_ScrollSpeed的数值可以更改滚动速度.

4.如果想更改激活滚动的范围,可以定义scrollover_Nudge,如:

 

a.scrollover .scrollover_Nudge {

top:-1px;

}

兼容浏览器:

  • Firefox 2.0
  • Internet Explorer 7
  • Internet Explorer 6
  • Internet Explorer 5.5
  • Safari 3 (Windows)
  • Opera 9