JS 實現自定義滾動效果2
阿新 • • 發佈:2019-01-02
//獲得當前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); }); } }