<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UlScroll.aspx.cs" Inherits="UlScroll" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <mce:style type="text/css"><!-- *{ margin:0px; padding:0px;word-wrap:break-word; word-break:break-all; } .show { width:250px; height:100px; background:#bbb; border:1px red solid ; overflow:hidden;word-wrap:break-word; word-break:break-all; } .show ul { margin:0px; padding:0px; } .show li { list-style:none; overflow:hidden; margin:0px; padding:0px; line-height:20px; } --></mce:style><style type="text/css" mce_bogus="1"> *{ margin:0px; padding:0px;word-wrap:break-word; word-break:break-all; } .show { width:250px; height:100px; background:#bbb; border:1px red solid ; overflow:hidden;word-wrap:break-word; word-break:break-all; } .show ul { margin:0px; padding:0px; } .show li { list-style:none; overflow:hidden; margin:0px; padding:0px; line-height:20px; }</style> <title></title> <mce:script type="text/javascript" src="Scripts/jquery-1.3.1.min.js" mce_src="Scripts/jquery-1.3.1.min.js"></mce:script> <mce:script type="text/javascript"><!-- $(function() { var $this = $(".show"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this); }, 3000); }).trigger("mouseleave"); }); function scrollNews(obj) { var $self = obj.find("ul:first"); var lineHeight = $self.find("li:first").height(); //获取行高 // $self.animate({ "marginTop": "0px" }, 600, function() { // $self.find("li:last").css({"display":"none"}).prependTo($self).show(2000); //appendTo能直接移动元素 // }) $self.find("li:last").css({ "display": "none" }).prependTo($self).show(2000); } // --></mce:script> </head> <body> <form id="form1" runat="server"> <div class="show" > <ul > <li><a href="#" mce_href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li> <li><a href="#" mce_href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li> <li><a href="#" mce_href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li> <li><a href="#" mce_href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li> <li><a href="#" mce_href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li> <li><a href="#" mce_href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li> <li><a href="#" mce_href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li> </ul> </div> </form> </body> </html>