From the example found on the network, I did the next extension, the original example is scrolling up, extending a scroll down method:
"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; charset=gb2312"/><title> Rolling screen Experiment </title><style type="Text/css">Ul,li{margin:0;p adding:0} #scrollDiv {width:300px;height:100px;min-height:25px;line-height:25px;border: #ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;}</style> <script src="Js/jquery-1.4.1.js"></script><script type="Text/javascript">(function ($) {$.fn.extend ({scroll:function (OPT, callback) {//Initialization of parameters if(!opt)varopt = {}; var_this = This. EQ (0). Find ("Ul:first"); varLineh = _this.find ("Li:first"). Height (),//Get Row Heightline = Opt.line? parseint (Opt.line,Ten): parseint ( This. Height ()/Lineh,Ten),//the number of rows per scroll, the default is one screen, which is the parent container heightSpeed = Opt.speed? parseint (Opt.speed,Ten) : -,//scrolling speed, the higher the value, the slower the speed (ms)Timer = Opt.timer? parseint (Opt.timer,Ten) : -;//time interval for scrolling (milliseconds) if(line = =0) line =1; varUpheight =0-Line *Lineh; varDownheight=line * Lineh-0; //scrolling functionScrollup =function () {_this.animate ({margintop:upheight}, Speed, function () { for(i =1; I <= line; i++) {_this.find ("Li:first"). AppendTo (_this); } _this.css ({margintop:0 }); } ); }, //Scroll down functionScrolldown =function () {_this.animate ({margintop:downheight},//Animate CSS StylesSpeed , function () {_this.find ("Li:last"). Prependto (_this); _this.css ({margintop:0 }); } ) } varTimerid//Mouse Event Bindings_this.hover (function () {clearinterval (Timerid); }, Function () {Timerid= SetInterval ("Scrolldown ()", timer);//Call down or scroll up the function}). Mouseout (); })}) (JQuery); $ (document). Ready (function () {$ ("#scrollDiv"). Scroll ({line:1, Speed: -, Timer: - }); });</script>"Scrolldiv"> <ul> <li> This is the 1th line of the announcement title </li> <li> This is the 2nd line of the announcement title </li> <li> This is the 3rd line of the announcement title </li> <li> This is the 4th line of the announcement title </li> <li> This is the 5th line of the announcement title </li> <li> This is the 6th line of the announcement title </li> <li> This is the announcement 7th line of the title </li> <li> This is the 8th line of the announcement title </li> </ul></div></body>jquery automatic scrolling effect, applicable to the announcement of news and other rolling screen