jquery文字纵向滚动效果(带间隔停留)
<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotation"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); },3000); }).trigger("mouseleave"); function scrollNews(obj) { var $self = obj.find("ul"); var lineHeight = $self.find("li:first").height(); $self.animate({ "marginTop": -lineHeight + "px" },500, function() { $self.css({ marginTop: 0 }).find("li:first").appendTo($self); }) } }) </script>
以下是HTML代码
<!--滚动文字开始--> <div id="quotation" style="height:17px; line-height:17px; overflow:hidden; margin-top:15px; "> <ul style="margin:0;padding:0; list-style:none"> <li style="display: list-item;">1111111111</li> <li style="display: list-item;">2222222</li> <li style="display: list-item;">3333333333333</li> </ul> </div> <!--滚动文字结束-->