jQuery kxbdMarquee 无缝滚动

最新推荐文章于 2021-07-28 19:55:09 发布

转载最新推荐文章于 2021-07-28 19:55:09 发布 · 438 阅读

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用jQuery库实现元素的滚动效果。通过简单的HTML结构配合JavaScript代码与CSS样式，可以轻松创建滚动动画，如跑马灯效果。文章提供了完整的配置选项及示例代码。

web
config

使用例子

载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.kxbdmarquee.js"></script>
ready
$('#element_id').kxbdMarquee();

dom
<div id="element_id">
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

css
#element_id{overflow:hidden;}
#element_id ul li{float:left;}

配置

-- 名称   | 默认值  | 说明 --
direction   "left"  滚动方向。可设置为："left", "right", "up", "down"
isEqual true    所有滚动的元素长宽是否相等。可设置为：true, false
loop    0   循环滚动次数，0 表示无限循环
scrollAmount    1   步长(px)
scrollDelay 20  时长(ms)