标签：JS

技巧:给链接文字添加滚动变化效果(JS)

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

 

 下面介绍一下实现方法.

 

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

 

<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>

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

 

<style>
a.scrollover {
/* Default Colour/Styles here */
color: #3366CC;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #FF5A00;
}
</style>

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

<a href="你的链接" class="scrollover" type="scrollover">链接文字</a>

注:

如果你使用的上传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

From: http://www.digglife.cn/go/291212.html