让你的文字链接“滚”起来
相信大家对通过CSS实现的一般链接样式(比如变色、下划线、背景色、边框等装饰)都感到十分普通,吸引不了访客的眼球。那如果可以让链接在被触及时滚动起来呢?听上去挺吸引的吧?使用 Scrollovers 就可以实现这样的效果。Scrollovers 是一个当鼠标触及文字链接时会上下滚动显示的JS特效代码。我们先来体验一下(点击下面的链接进行测试,需等页面加载完毕,如果您是RSS Reader请点击这里查看):
怎样?酷吧?当你把鼠标移向定义了scrollovers属性的文字链接时,就会向上或向下滚动显示。下面介绍如何实现这么酷的效果。
1. 将下面的代码添加到网站页面的head中,对于WordPress的用户来说,可以将其添加至模板中header.php文件的<head>…</head>区域内:
- <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. 你可以通过添加以下代码到样式表或页面中来修改链接的颜色:
- <style>
- a.scrollover {
- /* 默认链接颜色 */
- color: #557AFF;
- }
- a.scrollover em:first-line {
- /* 鼠标触发链接颜色 */
- color: #FF5B3C;
- }
- </style>
4. JS文件里可修改的参数:
scrollovers_ScrollSpeed - 改变链接滚动的速度
scrollovers_ScrollDownOnMouseOver - 改变链接滚动的方向,向上而下的滚动为true值,自下而上的滚动为false值
scrollovers_TypeName - 如果你希望对网站内所有链接都使用滚动效果,可将此参数设置为空字符串,即把scrollover删除
scrollover_Nudge - 如果你想让scrollovers在指定的范围内实现,那你可以在样式表的相应位置使用这个参数,例如:
- a.scrollover .scrollover_Nudge {
- top:-1px;
- }
Scrollovers 代码目前支持IE, Firefox, Safari, Opera这些主流浏览器。
虽然效果酷酷的,很是吸引,但仍存在一定的缺点:
- 需要在页面加载完成后,代码才会生效,在页面加载过程中,链接的属性仍由CSS中默认的a.链接样式决定
- 代码有6.5KB左右大小,可能会在一定程度上影响到页面加载的速度
尽管如此,这么炫这么酷的链接效果还是值得一试的。
Random Posts:
- 本站升级到WordPress 2.7正式版 - 十二月 15, 2008
- CardFunk:在线制作趣味电子贺卡 - 十二月 5, 2008
- BannerFans:免费在线制作并分享 Banners - 十二月 17, 2008
- Clikboard:创建网上公告板 - 十二月 17, 2008
- 20+优秀的CMS型WordPress网站 - 九月 25, 2008
- 我的第一次:参与中文网志年会 - 十一月 14, 2008
- 在线图形图案设计创作 - Myoats - 八月 14, 2008
- Webinmail:通过 Email 查看被封锁的网站 - 十二月 28, 2008
- Firefox 3 扩展组件大赛得奖作品 - 八月 22, 2008
- 美国海滩上发现的“蒙托克怪兽” - 八月 5, 2008








































十一月 5th, 2008 at 7:20 下午
支持下
[回复这位小朋友]
十一月 5th, 2008 at 8:15 下午
效果还挺酷的
[回复这位小朋友]
十一月 5th, 2008 at 8:58 下午
好像没有单独的代码。
我的不是WP博客。
[回复这位小朋友]
十一月 6th, 2008 at 12:56 上午
如果是使用BSP的话就没办法了,因为需要有修改相关页面文件的权限
[回复这位小朋友]
十一月 5th, 2008 at 10:19 下午
很好的效果啊!!
[回复这位小朋友]
十一月 6th, 2008 at 8:58 下午
效果不错 呵呵
[回复这位小朋友]
十一月 6th, 2008 at 9:26 下午
已经在用了。
[回复这位小朋友]
十一月 7th, 2008 at 9:24 下午
这个页面看不到演示~~
[回复这位小朋友]
十一月 8th, 2008 at 8:32 下午
需要等页面加载完毕才会显示的
[回复这位小朋友]
十一月 11th, 2008 at 3:41 下午
6.5…
最好么1k以内的那种 用起来最爽…
[回复这位小朋友]