如何用jQuery做一个跑马灯，Marquee。

最新推荐文章于 2024-10-18 11:54:44 发布

刘一笔(公众号同名)

最新推荐文章于 2024-10-18 11:54:44 发布

阅读量6.8k

点赞数

文章标签： jQuery 跑马灯前端 JavaScript

本文链接：https://blog.csdn.net/samt327/article/details/80038657

版权

本文介绍了如何利用jQuery创建跑马灯（Marquee）效果，包括文字或图片的滚动需求，以及滚动区域限制的处理。通过设置HTML结构，如浮动布局，然后使用jQuery控制ul元素的left属性实现滚动动画。代码示例和详细解释帮助理解实现过程，源码可在github获取。

摘要由CSDN通过智能技术生成

先看要实现的需求：

1.文字或者图片能够在区域内按照一定的规则进行滚动

2.滚动区域是否有限制，滚动内容超出限制区域的处理

完成后的效果：

代码实现

<div class="outBox">
    <ul class="ulPmd">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ul>
</div>

HTML结构还是很简单的，就是一个无序列表，横过来就设float：left就好了。

重点来了，怎样让每一个列表项动起来。动的逻辑就是改变无序列表的整体的位置，涉及到位置，那就绕不卡，定位属性。</