$.fn.extend({
"animateUp":function(value){
var docthis = this;
//默认参数
value=$.extend({
"li_h":"30",
"time":2000,
"movetime":1000
},value)
//向上滑动动画
function autoani(){
$("li:first",docthis).animate({"margin-top":-value.li_h},value.movetime,function(){
$(this).css("margin-top",0).appendTo("#scroll-up");
})
}
//自动间隔时间向上滑动
var anifun = setInterval(autoani,value.time);
//悬停时停止滑动,离开时继续执行
$(docthis).hover(function(){
clearInterval(anifun); //清除自动滑动动画
},function(){
setInterval(autoani,value.time); //继续执行动画
})
}
});
$('#scroll-up').animateUp();
<ul class="" id="scroll-up">
<li class="scroll-item">
<span class="scroll-item-span">1</span>
</li>
<li class="scroll-item">
<span class="scroll-item-span">2</span>
</li>
<li class="scroll-item">
<span class="scroll-item-span">3</span>
</li>
<li class="scroll-item">
<span class="scroll-item-span">4</span>
</li>
<li class="scroll-item">
<span class="scroll-item-span">5</span>
</li>
</ul>
网友评论