先看要实现的需求:
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就好了。
重点来了,怎样让每一个列表项动起来。动的逻辑就是改变无序列表的整体的位置,涉及到位置,那就绕不卡,定位属性。
所以这里很自然的想到,整体ul参照父层div进行绝对定位,通过改变left的值来使ul整体的位置发生变动。

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

390

被折叠的 条评论
为什么被折叠?



