先看要实现的需求:
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实现的话,关键部分的代码应该是这样的
$(function () { var i=0; var timer; timer=setInterval(function(){ //根据ul的位移来判断一秒钟向左移动的距离; if(i>$('li').length){ i=1; //如果所有li元素向左移动一遍完成,那滚动重新开始 }else{ i++; } //通过i的值来改变整体li元素的位置 var ulLeft=-($('li').width())*i; $('.ulPmd').css('left',ulLeft) },1000); })
审查元素观察滚动效果
蓝底部分就是ul的位置,jQuery控制ul相对于黑色div的left位置。