最近遇到了一个jquery产品间接向下滚动的效果,使用的代码很少,核心函数就是prepend()函数
<ul id="buyList" class="clearfix">
<li><a href=""><img src="images/parant1.jpg" alt=""></a></li>
<li><a href=""><img src="images/parant2.jpg" alt=""></a></li>
<li><a href=""><img src="images/parant3.jpg" alt=""></a></li>
<li><a href=""><img src="images/parant4.jpg" alt=""></a></li>
<li><a href=""><img src="images/parant5.jpg" alt=""></a></li>
<li><a href=""><img src="images/parant6.jpg" alt=""></a></li>
<li><a href=""><img src="images/parant7.jpg" alt=""></a></li>
<li><a href=""><img src="images/parant8.jpg" alt=""></a></li>
</ul>
<script>
$(function(){
var _BuyList=$("#buyList");
var Trundle = function () {
_BuyList.prepend(_BuyList.find("li:last")).css('marginTop', '-70px');
_BuyList.animate({ 'marginTop': '0px' }, 1000);
}
var setTrundle = setInterval(Trundle, 3000);
_BuyList.hover(function () {
clearInterval(setTrundle);
setTrundle = null;
},function () {
setTrundle = setInterval(Trundle, 3000);
});
});
</script>
它的基本作用就是像元素的头部(内部)添加元素
值得注意的是:
当新添加的元素是容器本身的子元素时,它的内部元素不会增加,只是该子元素的位置调到了第一位,这就可以实现上面元素间接向下滚动的效果
而当新添加的元素不是容器本身的子元素时,该新元素会一直被添加