<!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> <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script> <style> ul ,li{ margin:0px; padding:0px; list-style:none;} .roll-box{ background:# #FF0000; height:35px; overflow:hidden;} .roll-box li { line-height:35px; height:35px;} </style> </head> <body> <div class="roll-box" id="roll-box"> <ul > <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开!看你有没被坑蒙在鼓里~</a></li> <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花,超简单的</a></li> <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐!好吃又减肥!</a></li> </ul> </div> <script> function autoNotice(obj) { $(obj).find("ul:first").animate({ marginTop: "-35px" }, 500, function() { $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); }); } var myar = setInterval('autoNotice("#roll-box")', 2500); </script> </body> </html>
——————————————————-
小修改:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>单行文字滚动效果,jquery手写</title> <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script> <style> ul ,li{ margin:0px; padding:0px; list-style:none;} .roll-box{ background:# #FF0000; xheight:35px; overflow:hidden; width:200px;} .roll-box li { line-height:35px; xheight:35px;} </style> </head> <body> <div class="roll-box" id="roll-box"> <ul > <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开!看你有没被坑蒙在鼓里~</a></li> <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花,超简单的</a></li> <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐!好吃又减肥!</a></li> </ul> </div> <script> function autoNotice(obj) { var h = $(obj).find("ul:first li:first").height(); console.log(); $(obj).find("ul:first").animate({ marginTop: -h+"px" }, 500, function() { $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); }); } var myar = setInterval('autoNotice("#roll-box")', 2500); </script> </body> </html>