or  Sign Up

< Browse > Home / Blogging / Blog article: 让你的文字链接“滚”起来

让你的文字链接“滚”起来

十一月 5th, 2008 | 10 Comments | Posted in Blogging | sfox

相信大家对通过CSS实现的一般链接样式(比如变色、下划线、背景色、边框等装饰)都感到十分普通,吸引不了访客的眼球。那如果可以让链接在被触及时滚动起来呢?听上去挺吸引的吧?使用 Scrollovers 就可以实现这样的效果。Scrollovers 是一个当鼠标触及文字链接时会上下滚动显示的JS特效代码。我们先来体验一下(点击下面的链接进行测试,需等页面加载完毕,如果您是RSS Reader请点击这里查看):

TEST HOVERING HERE

怎样?酷吧?当你把鼠标移向定义了scrollovers属性的文字链接时,就会向上或向下滚动显示。下面介绍如何实现这么酷的效果。

 

1. 将下面的代码添加到网站页面的head中,对于WordPress的用户来说,可以将其添加至模板中header.php文件的<head>…</head>区域内:

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

如果不想调用外站的代码,那你可以下载JS代码,上传至自己的网站,再通过修改src后的地址为你保存JS文件的地址来调用。

  scrollovers.zip (1.7 KiB, 82 hits)

 

2. 为文章中的链接添加scrollover属性即可实现滚动效果,使用方法:

<a href="链接地址" class="scrollover" type="scrollover">链接文字</a>

 

3. 你可以通过添加以下代码到样式表或页面中来修改链接的颜色:

  1. <style>
  2.    a.scrollover {
  3.       /* 默认链接颜色 */
  4.      color: #557AFF;
  5.    }
  6.    a.scrollover em:first-line {
  7.      /* 鼠标触发链接颜色 */
  8.      color: #FF5B3C;
  9.    }
  10. </style>

 

4. JS文件里可修改的参数:

scrollovers_ScrollSpeed - 改变链接滚动的速度

scrollovers_ScrollDownOnMouseOver - 改变链接滚动的方向,向上而下的滚动为true值,自下而上的滚动为false值

scrollovers_TypeName - 如果你希望对网站内所有链接都使用滚动效果,可将此参数设置为空字符串,即把scrollover删除

scrollover_Nudge - 如果你想让scrollovers在指定的范围内实现,那你可以在样式表的相应位置使用这个参数,例如:

  1. a.scrollover .scrollover_Nudge {
  2.  top:-1px;
  3.  }

 

Scrollovers 代码目前支持IE, Firefox, Safari, Opera这些主流浏览器。

虽然效果酷酷的,很是吸引,但仍存在一定的缺点:

  • 需要在页面加载完成后,代码才会生效,在页面加载过程中,链接的属性仍由CSS中默认的a.链接样式决定
  • 代码有6.5KB左右大小,可能会在一定程度上影响到页面加载的速度

尽管如此,这么炫这么酷的链接效果还是值得一试的。

 

Random Posts:

Leave a Reply PostRank: 1.0 | TotalViews: 425 times

  如果喜欢本文,你可以 订阅本站全文,以便获取更多相关的信息。
  本文作者:sfox
  原文标题:让你的文字链接“滚”起来
  原文链接:http://imsfox.com/scrollovers-makes-links-scrolling.fox
  © SFOX'S BLOG 版权所有, 转载请遵循 署名-非商业性使用-相同方式共享 3.0 协议.

 

 

已登录的鲜果用户?

 

Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪 ViVi 365Key 网摘 天极网摘 和讯网摘 博拉网 POCO 网摘 饭否 QQ 书签 Digbuzz 我挖网 Mister Wong

 

您可能感兴趣的相关文章

 

 

10 条评论 关于 “让你的文字链接“滚”起来”

  1. 1F 通讯社 Says:

    十一月 5th, 2008 at 7:20 下午

  2. 2F 任平生 Says:

    十一月 5th, 2008 at 8:15 下午

    效果还挺酷的 :cool:

    [回复这位小朋友]

  3. 3F 爱燕博客 Says:

    十一月 5th, 2008 at 8:58 下午

    好像没有单独的代码。
    我的不是WP博客。

    [回复这位小朋友]

     sfox Replies:
    十一月 6th, 2008 at 12:56 上午

    如果是使用BSP的话就没办法了,因为需要有修改相关页面文件的权限

    [回复这位小朋友]

  4. 4F lstar Says:

    十一月 5th, 2008 at 10:19 下午

    很好的效果啊!!

    [回复这位小朋友]

  5. 5F 醉倚西风 Says:

    十一月 6th, 2008 at 8:58 下午

    效果不错 呵呵

    [回复这位小朋友]

  6. 6F Centeur Says:

    十一月 6th, 2008 at 9:26 下午

    已经在用了。

    [回复这位小朋友]

  7. 7F Mao Says:

    十一月 7th, 2008 at 9:24 下午

    这个页面看不到演示~~

    [回复这位小朋友]

     sfox Replies:
    十一月 8th, 2008 at 8:32 下午

    需要等页面加载完毕才会显示的

    [回复这位小朋友]

  8. 8F Yacca Says:

    十一月 11th, 2008 at 3:41 下午

    6.5…

    最好么1k以内的那种 用起来最爽…

    [回复这位小朋友]

发表您的评论,让别人说去吧!

Tips1:提交评论后,您可以在 5分钟内 来进行修改!
Tips2:允许部分 HTML 标签:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notes1:URIs 必须完整 (例如: http://imsfox.com) ,所有标签必须正常关闭。
Notes2:系统会自动分行,并截断部分字符的超出部分。
Notes3:请注意评论与文章内容 相关, SPAM 将被列入本站的黑名单。


13100515249489521309561307976850starsmoonsmile4starsmoonsmile3200812021416293614722008120214164540656820081202141256908252200812021412471295302008120214110901442520081202141043897088

TOP