标签：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动</title> <script type="text/javascript" src="../js/jquery-2.0.0.min.js"></script> <script type="text/javascript"> $(function(){ var $this = $(".scroll"); var scrollTimer; $this.hover(function(){ clearInterval(scrollTimer); },function(){ scrollTimer = setInterval(function(){ scrollContent( $this ); },2000 ); }).trigger("mouseout"); }); function scrollContent(obj){ var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); //获取行高 $self.animate({ "margin-top" : -lineHeight +"px" },1000 , function(){ $self.css({"margin-top":"0px"}).find("li:first").appendTo($self); //appendTo能直接移动元素而不是复制，被appendto的元素位置发生变化 }) } </script> <style type="text/css"> *{ padding:0px; margin: 0px; } .scroll ul li{ list-style:none; } .scroll { border:1px solid red; width: 200px; height: 80px; line-height: 20px; overflow: hidden; background: #FFFFFF; } .scroll li { height: 20px; } </style> </head> <body> <div class="scroll"> <ul> <li>aaaaaaaaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbbbbbbbb</li> <li>ccccccccccccccccccccc</li> <li>ddddddddddddddddddddd</li> <li>eeeeeeeeeeeeeeeeeeeee</li> <li>fffffffffffffffffffff</li> <li>ggggggggggggggggggggg</li> <li>hhhhhhhhhhhhhhhhhhhhh</li> </ul> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/wenxiangxu/p/5123972.html
