-----你是不是为你的文章内的链接不够引人而烦恼呢?虽然可以使用CSS做些特效,但总是不够花哨。试试scroolovers吧,说不定它会让你的访客不住点击你设置的链接!
-----scroolovers是使用JS实现的文本链接在鼠标经过时上下滚动的网页特效技术。为了使大家明白,请先看下面的例子。现在面临的问题是,这个效果貌似只有在页面加载完成后才能展示出来,在页面加载的时候,链接的属性还是根据CSS中的a.和a.hover属性来决定的。
这是个例子(*^__^*)----解析几何。
-----当你把鼠标放到定义了scroolovers属性的链接时,链接文字变自上而下(也可以实现自下而上,具体见后文)滚动效果。
-----下面开始介绍scroolovers的使用方法。
【第一步】
请将下面这段代码添加到网站的head区。对于bo-blog用户在后台的参数设置中把这段代码添加到区额外代码即可。
你也可以下载这段代码,然后修改期中某些参数后上传到你的网站,然后把上面代码中src后面的地址改为你保存的js文件地址。
【第二步】
将下面这段代码添加到CSS文件的任意位置。
其中的a.scrollover定义的是鼠标经过时的链接的颜色,a.scrollover em:first-line定义的是链接滚动下来的颜色。
【第三步】
OK.现在只要在编写链接的时候使用下面的代码即可
即在目标连接后面增加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武装下你的文本链接吧!
-----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 {
/* 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武装下你的文本链接吧!
1 Responses