JS部份
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function () { var $this = $(".renav"); var scrollTimer; $this.hover(function () { clearInterval(scrollTimer); }, function () { scrollTimer = setInterval(function () { scrollNews($this); }, 2000); }).trigger("mouseout"); }); function scrollNews(obj) { var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); $self.animate({ "margin-top": -lineHeight + "px" }, 600, function() { $self.css({ "margin-top": "0px" }).find("li:first").appendTo($self); }); } |
HTML部份
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style type="text/css"> .renav { width: 200px; height: 150px; line-height: 21px; overflow: hidden; background: #FFFFFF; } .renav li { height: 21px; } </style> <div class="renav"> <ul style="margin-top: 0px;"> <li><a>罗氏</a></li> <li><a>瑞声达</a></li> <li><a>未添加1</a></li> <li><a>未添加2</a></li> <li><a>未添加3</a></li> <li><a>未添加4</a></li> <li><a>西门子</a></li> <li><a>欧姆龙</a></li> </ul> </div> |