需要在頁面中一個小的區域循環滾動展示新聞(公告、活動、圖片等等),並且,鼠標懸停時停止滾動並提示,離開后,繼續滾動。
效果圖:
上干貨
html:
<div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li> <li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li> <li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li> <li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li> <li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li> <li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li> </ul> </div>
css:
ui,li { list-style: none; } #news{ height: 75px; overflow: hidden; }
關鍵是js文件:
$(function() { var $this = $("#news"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); }, 2000); }).trigger("mouseleave"); function scrollNews(obj) { var $self = obj.find("ul"); var lineHeight = $self.find("li:first").height(); $self.animate({ "marginTop": -lineHeight + "px" }, 600, function() { $self.css({ marginTop: 0 }).find("li:first").appendTo($self); }) } })
主要就是對hover、setInterval、clearInterval、animate這些方法以及marginTop屬性(marginLeft、top、left等等)的理解和運用,需要注意的是,如果不加.trigger("mouseleave"),在網頁初始化的時候列表不會滾動,還有appendTo能直接移動元素,就這些了。