jQuery滚动效果,带停顿的,比起不间断滚动看上去更舒服点。 代码如下,复制保存成HTML文件可直接看效果。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery滚动停顿滚动效果</title> <!--载入jquery--> <mce:script type="text/javascript" src="http://123.juntoo.com/public/home/js/jquery.js" mce_src="http://123.juntoo.com/public/home/js/jquery.js"></mce:script> <mce:script type="text/javascript"><!-- //(obj:div元素id;height:滚动高度;animate:滚动速度) function AutoScroll(obj,height,animate){ $(obj).find("ul:first").animate({ //要滚动的元素 marginTop:"-"+height+"px" // 元素上边距为 -height ,产生向上滚动的效果 },animate,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); // 加到最后 }); } $(document).ready(function(){ timer=setInterval('AutoScroll("#scrollDiv",24,500)',2000); //鼠标悬停,停止滚动 $('#scrollDiv').hover(function(){ clearInterval(timer);},function(){timer=setInterval('AutoScroll("#scrollDiv",24,500)',2000); }); }); // --></mce:script> </head> <body> <div id="scrollDiv" style="width:200px; height:100px; overflow:hidden; border:1px solid #060"> <ul> <li style="height:24px">·<a href="http://123.juntoo.com/" mce_href="http://123.juntoo.com/" target="_blank" title="旅游网站导航">旅游网站导航</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/guoneihangkonggongsi/" mce_href="http://123.juntoo.com/html/guoneihangkonggongsi/" target="_blank" title="国内航空公司">国内航空公司</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/geditechan/" mce_href="http://123.juntoo.com/html/geditechan/" target="_blank" title="全国各地特产介绍">全国各地特产介绍</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/lvyoujingdian/index.htm" mce_href="http://123.juntoo.com/html/lvyoujingdian/index.htm" target="_blank" title="旅游景点">旅游景点</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/zhutilvyou/index.htm" mce_href="http://123.juntoo.com/html/zhutilvyou/index.htm" target="_blank" title="主题旅游">主题旅游</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/guoneihangkonggongsi/" mce_href="http://123.juntoo.com/html/guoneihangkonggongsi/" target="_blank" title="国内航空公司">国内航空公司</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/lvyoujingdian/index.htm" mce_href="http://123.juntoo.com/html/lvyoujingdian/index.htm" target="_blank" title="旅游景点">旅游景点</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/geditechan/" mce_href="http://123.juntoo.com/html/geditechan/" target="_blank" title="全国各地特产介绍">全国各地特产介绍</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/" mce_href="http://123.juntoo.com/" target="_blank" title="旅游网站导航">旅游网站导航</a> </li> <li style="height:24px">·<a href="http://123.juntoo.com/html/geditechan/" mce_href="http://123.juntoo.com/html/geditechan/" target="_blank" title="全国各地特产介绍">全国各地特产介绍</a> </li> </ul> </div> </body> </html>