一个网页链接的滑动效果

基于js和css,作者在其首页提供了DIY的工具。当鼠标经过链接的时候,有一个上下滑动的效果。
http://www.scrollovers.com

可以这样使用这个效果:
1、在网页中加入如下,可以把js下载下来,放到自己的空间里。

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

2、将链接形式修改成这样

1
<a href="http://www.hicode.org/wp-admin/[YOUR PAGE HERE]" TYPE="scrollover" class="scrollover">[YOUR TEXT HERE]</a>

3、添加这样的CSS,颜色自己修改。

1
2
3
4
<style>
a.scrollover { /* Default Colour/Styles here */ color: #557AFF; }
a.scrollover em:first-line { /* Rollover Colour/Styles here */ color: #FF5B3C; }
</style>

4、还可以修改js,达到你想要的效果。
scrollovers_ScrollSpeed 是控制速度的
scrollovers_ScrollDownOnMouseOver 是控制上滚还是下滚的
scrollovers_TypeName 如果想所有的链接都滚动,而不需要设置Type attrbiute的话,把这个变量的值改成空字符

收藏自:Hi,Code!

发表评论

电子邮件地址不会被公开。 必填项已用*标注