<html> <head> <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script> <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); }); } $('#abcdddd').click(function(){ $('#quotation ul').append('<li style="display: list-item;">hahahahah</li>'); }); }); </script> </head> <body> <!--滚动文字开始--> <div id="quotation" style="height:50px; 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> <li style="display: list-item;">4333333333333</li> <li style="display: list-item;">5333333333333</li> <li style="display: list-item;">6333333333333</li> <li style="display: list-item;">7333333333333</li> <li style="display: list-item;">8333333333333</li> <li style="display: list-item;">9333333333333</li> <li style="display: list-item;">10333333333333</li> <li style="display: list-item;">11333333333333</li> <li style="display: list-item;">12333333333333</li> <li style="display: list-item;">13333333333333</li> <li style="display: list-item;">14333333333333</li> </ul> </div> <button id="abcdddd">1111111</button> <!--滚动文字结束--> <div id="oDiv"> <ul id="oUl"> <li>第1个li元素</li> <li>第2个li元素</li> <li>第3个li元素</li> <li>第4个li元素</li> <li>第5个li元素</li> <li>第6个li元素</li> <li>第7个li元素</li> <li>第8个li元素</li> </ul> </div> <script> function autoScroll(obj, ul_bz){ $(obj).find(ul_bz).animate({ marginTop : "-25px" },500,function(){ $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); }); } setInterval('autoScroll("#oDiv", "#oUl")',3000) </script> </body> </html>
浙公网安备 33010602011771号