Aug24文字滚动效果marquee插件的应用
如何使用?
1、加载javascript。
<script?type="text/javascript"?src="js/jquery.js"></script>?<script?type="text/javascript"?src="js/jquery.marquee.js"></script>?<script?type="text/javascript">?$(function(){?????$("#marquee").marquee({yScroll:?"bottom"});?});?</script>??
2、加入CSS样式。
ul.marquee?{display:?block;line-height:?1;position:?relative;overflow:?hidden;width:?400px;?height:?22px;?}?ul.marquee?li?{position:?absolute;?top:?-999em;left:?0;display:?block;?white-space:?nowrap;?padding:?3px?5px;?text-indent:0.8em;}?
3、HTML代码如下:
<ul?id="marquee"?class="marquee">???????<li><a?href="http://www.helloweba.com/view-blog-43.html"?target="_blank">?DIV+CSS网页布局对网站搜索引擎优化的影响</a>?[2010-08-20]</li>???????<li><a?href="http://www.helloweba.com/view-blog-42.html"?target="_blank">?jFlow:jQuery内容滑动特效插件的应用</a>?[2010-08-17]</li>???????<li><a?href="http://www.helloweba.com/view-blog-43.html"?target="_blank">?Open?Flash?Chart?+?PHP?+?Mysql生成动态图表</a>?[2010-08-16]</li>????</ul>?
该插件提供了许多属性选项,您可以配置定制外观和效果。
{??????????yScroll:?"top"????????//?初始滚动方向?(还可以是"top"?或?"bottom")????????,?showSpeed:?850????????//?初始下拉速度????????,?scrollSpeed:?12???????//?滚动速度????????,?pauseSpeed:?5000??????//?滚动完到下一条的间隔时间????????,?pauseOnHover:?true????//?鼠标滑向文字时是否停止滚动????????,?loop:?-1??????????????//?设置循环滚动次数?(-1为无限循环)????????,?fxEasingShow:?"swing"??//?缓冲效果????????,?fxEasingScroll:?"linear"??//?缓冲效果????????,?cssShowing:?"marquee-showing"??//定义class?????????//?event?handlers????????,?init:?null????????????????//?初始调用函数????????,?beforeshow:?null???????????//?滚动前回调函数????????,?show:?null?????????????????//?当新的滚动内容显示时回调函数????????,?aftershow:?null????????????//?滚动完了回调函数?}?
jquery.marquee.js可以到官网地址下载:http://www.givainc.com/labs/marquee_jquery_plugin.htm
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。