本文通过marquee.js结合实例演示文字上下、左右滚动的效果。
淘建站为您提供更多_其它特效_动画效果_滚动_marquee，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 228 次
下载资源
37 积分
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
1、加载调用marquee.js：
<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.sucaiq.com/js" target="_blank"> Skrollr奇妙的视差滚动效果</a> [2015-08-20]</li>
<li><a href="http://www.sucaiq.com/js" target="_blank"> jFlow：jQuery内容滑动特效插件的应用</a> [2015-08-17]</li>
<li><a href="http://www.sucaiq.com/js" target="_blank"> Open Flash Chart + PHP + Mysql生成动态图表</a> [2015-08-16]</li>
</ul>marquee.js API
| 参数 | 描述 | 默认值 |
| yScroll | 初始滚动方向 (还可以是 | top |
| showSpeed | 初始下拉速度 | 850 |
| scrollSpeed | 滚动速度 | 12 |
| pauseSpeed | 滚动完到下一条的间隔时间 | 5000 |
| pauseOnHover | 鼠标滑向文字时是否停止滚动 | true |
| loop | 设置循环滚动次数 （-1为无限循环） | -1 |
| fxEasingShow: | 缓冲效果 | swing |
| fxEasingScroll | 缓冲效果 | linear |
| cssShowing | 定义class | marquee-showing |
回调函数 |
||
| init: null | 初始调用函数 | - |
| beforeshow: null | 滚动前回调函数 | - |
| show: null | 当新的滚动内容显示时回调函数 | - |
| aftershow: null | 滚动完了回调函数 | - |
