直接上代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现文字逐条向上滚动特效</title> <style> *{ margin:0; padding:0; list-style:none;} #FontScroll{width:100%;height:120px;line-height:30px;border:1px solid green;overflow:Hidden;padding:5px 0;margin:0px auto;} #FontScroll .line{text-align:center;width:100%;} #FontScroll .fontColor a{color:red;} </style> </head> <body> <!-- 代码部分 begin --> <div id="FontScroll"> <ul> <li><a href="http://www.lanrenzhijia.com">懒人之家</a></li> <li><a href='http://www.lanrenzhijia.com/flash/' >Flash素材</a></li> <li><a href='http://www.lanrenzhijia.com/nav/' >菜单导航</a></li> <li><a href='http://www.lanrenzhijia.com/time/' >时间日期</a></li> <li><a href='http://www.lanrenzhijia.com/banner/' >焦点图</a></li> </ul> </div> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script> (function($){ $.fn.FontScroll = function(options){ var d = {time: 3000,s: 'fontColor',num: 1} var o = $.extend(d,options); this.children('ul').addClass('line'); var _con = $('.line').eq(0); var _conH = _con.height(); //滚动总高度 var _conChildH = _con.children().eq(0).height();//一次滚动高度 var _temp = _conChildH; //临时变量 var _time = d.time; //滚动间隔 var _s = d.s; //滚动间隔 _con.clone().insertAfter(_con);//初始化克隆 //样式控制 var num = d.num; var _p = this.find('li'); var allNum = _p.length; _p.eq(num).addClass(_s); var timeID = setInterval(Up,_time); this.hover(function(){clearInterval(timeID)},function(){timeID = setInterval(Up,_time);}); function Up(){ _con.animate({marginTop: '-'+_conChildH}); //样式控制 _p.removeClass(_s); num += 1; _p.eq(num).addClass(_s); if(_conH == _conChildH){ _con.animate({marginTop: '-'+_conChildH},"normal",over); } else { _conChildH += _temp; } } function over(){ _con.attr("style",'margin-top:0'); _conChildH = _temp; num = 1; _p.removeClass(_s); _p.eq(num).addClass(_s); } } })(jQuery); $('#FontScroll').FontScroll({time: 2000,num: 1}); </script> <!-- 代码部分 end --> </body> </html>