<![CDATA[解析几何]]> http://www.elivers.com/index.php zh-cn http://www.elivers.com/read.php/188.htm <![CDATA[scrollovers--更酷的文本链接！]]> 林殇 <> Mon, 05 Nov 2007 14:19:21 +0000 http://www.elivers.com/read.php/188.htm 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武装下你的文本链接吧！

Tags - ]]> http://www.elivers.com/read.php/188.htm#blogcomment59106 <![CDATA[[评论] scrollovers--更酷的文本链接！]]> Ingrid <user@domain.com> Tue, 06 Nov 2007 07:09:25 +0000 http://www.elivers.com/read.php/188.htm#blogcomment59106