一個網(wǎng)頁鏈接的滑動效果

由 發(fā)表于 ┊2,383 PV

基于js和css，作者在其首頁提供了DIY的工具。當鼠標經(jīng)過鏈接的時候，有一個上下滑動的效果。
http://www.scrollovers.com

可以這樣使用這個效果：
1、在網(wǎng)頁中加入如下，可以把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 如果想所有的鏈接都滾動，而不需要設(shè)置Type attrbiute的話，把這個變量的值改成空字符

收藏自：Hi,Code!