-----你是不是为你的文章内的链接不够引人而烦恼呢?虽然可以使用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武装下你的文本链接吧!
Extra Info
This entry comes from 本站原创.It has been read for 4935 times.You may Leave a comment or 引用(0) this entry.
1 Responses
Ingrid Homepage
2007/11/06 15:09
好看,就是用的时候还要用比较复杂的代码。。。
-----可以将高级应用中的第三条和第四条综合运用来实现固定区域链接默认使用scrollover效果(*^__^*)
林殇 回复于 2007/11/06 23:13
分页: 1/1 第一页 1 最后页
发表评论
昵称

网址

电邮

打开HTML 打开UBB 表情 打开表情 隐藏 记住我 [注册]