标题：scrollovers--更酷的文本链接！
出处：解析几何
时间：Mon, 05 Nov 2007 22:19:21 +0000
作者：林殇
地址：http://www.elivers.com/read.php/188.htm

内容：
-----你是不是为你的文章内的链接不够引人而烦恼呢？虽然可以使用CSS做些特效，但总是不够花哨。试试scroolovers吧，说不定它会让你的访客不住点击你设置的链接！

-----scroolovers是使用JS实现的文本链接在鼠标经过时上下滚动的网页特效技术。为了使大家明白，请先看下面的例子。现在面临的问题是，这个效果貌似只有在页面加载完成后才能展示出来，在页面加载的时候，链接的属性还是根据CSS中的a.和a.hover属性来决定的。

这是个例子(*^__^*)----解析几何。

-----当你把鼠标放到定义了scroolovers属性的链接时，链接文字变自上而下（也可以实现自下而上，具体见后文）滚动效果。

-----下面开始介绍scroolovers的使用方法。
【第一步】
请将下面这段代码添加到网站的head区。对于bo-blog用户在后台的参数设置中把这段代码添加到区额外代码即可。
<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>

你也可以下载这段代码，然后修改期中某些参数后上传到你的网站，然后把上面代码中src后面的地址改为你保存的js文件地址。

【第二步】
将下面这段代码添加到CSS文件的任意位置。
<style>
   a.scrollover {
      /* Default Colour/Styles here */
      color: #557AFF;
   }
   a.scrollover em:first-line {
      /* Rollover Colour/Styles here */
      color: #FF5B3C;
   }
</style>

其中的a.scrollover定义的是鼠标经过时的链接的颜色，a.scrollover em:first-line定义的是链接滚动下来的颜色。

【第三步】
OK.现在只要在编写链接的时候使用下面的代码即可
<a href="YOUR PAGE HERE" class="scrollover" type="scrollover">YOUR TEXT HERE</a>

即在目标连接后面增加class="scrollover" type="scrollover"两个属性。

【高级应用】
通过修改js文件的参数，你可以更改scroolovers链接的显示细节。
1.改变滚动速度-----修改scrollovers_ScrollSpeed参数
2.让链接自下而上滚动-----更改scrollovers_ScrollDownOnMouseOver参数值为false
3.让scroolovers在固定范围实现-----在指定区域如下定义scrollover_Nudge
[code]a.scrollover .scrollover_Nudge {
   top:-1px;
}[/code
4.如果你希望对所有链接都使用滚动效果,而不用每次都添加样式参数,可以将第一行的scrollovers_TypeName参数设置为空字符窜,也就是将引号内的scrollover去掉——本条来自此人极度凶悍。

【浏览器支持】
    *  Firefox 2.0
    * Internet Explorer 7
    * Internet Explorer 6
    * Internet Explorer 5.5
    * Safari 3 (Windows)
    * Opera 9

【scrollover网站】
敬请移步http://www.scrollovers.com/

-----很好玩的东西，赶紧用scroolovers武装下你的文本链接吧！



Generated by Bo-blog 2.1.1 Release