JS 实现自定义滚动效果2
//获得当前scroll
var timer = null;
var ulList = $(".scroll .scrollBox");
myScrollFunction(ulList, timer);
function myScrollFunction(obj, timerObj) {
var ulNum = obj.children("li").length;
if (ulNum > 2) {
timerObj = setInterval(function() {
scrollList(obj);
}, 4500);
//鼠标经过清空定时器
obj.hover(function() {
clearInterval(timerObj);
}).mouseleave(function(){
timerObj = setInterval(function() {
scrollList(obj);
}, 4500);
})
}
//滚动动画
function scrollList(obj) {
//获得当前<li>的高度
// var scrollMargin= parseInt(obj.children("li:first-child").css('marginBottom'));
// var scrollHeight = obj.children("li:first-child").height() + scrollMargin;
var scrollHeight = obj.children("li:first-child").height();
//滚动出一个<li>的高度
obj.stop().animate({
marginTop: -scrollHeight
}, 1500,
function() {
//动画结束后,将当前<li>marginTop置为初始值0状态,再将第一个<li>拼接到末尾。
obj.css({
marginTop: 0
}).find("li:first").appendTo(obj);
});
}
}