jQuery实现公告新闻自动滚屏效果实例代码_

1、jQuery实现公告新闻自动滚屏效果实例代码_ 本文是我参考网络上的一个小demo，自己做了下扩展，原来是向上滚动的，扩展了一个向下滚动的方法，具体实例代码如下所示： html xmlns=l head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title滚屏试验/title style type=text/css ul,limargin:0;padding:0 #scrollDivwidth:300px;height:100px;min-height:25px;line-height:25px;borde

2、r:#ccc 1px solid;overflow:hidden #scrollDiv liheight: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) /参数初始化 if (!opt) var opt = ; var _this = this.eq(0).find(ul:first); var lineH = _this.find(

3、li:first).height(), /猎取行高 line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), /每次滚动的行数，默认为一屏，即父容器高度 speed = opt.speed ? parseInt(opt.speed, 10) : 500, /卷动速度，数值越大，速度越慢（毫秒） timer = opt.timer ? parseInt(opt.timer, 10) : 2021; /滚动的时间间隔（毫秒） if (line = 0) line = 1; var upHeight

4、 = 0 - line * lineH; var downHeight=line * lineH - 0; /滚动函数 scrollUp = function () _this.animate( marginTop: upHeight , speed, function () for (i = 1; i = line; i+) _this.find(li:first).appendTo(_this); _this.css( marginTop: 0 ); ); , /向下滚动函数 scrollDown = function () _this.animate( marginTop: downHe

5、ight ,/动画展现css样式 speed, function () _this.find(li:last).prependTo(_this); _this.css( marginTop: 0 ); ) var timerID /鼠标大事绑定 _this.hover(function () clearInterval(timerID); , function () timerID = setInterval(scrollDown(), timer);/这里调用向下或者向上滚动函数 ).mouseout(); ) )(jQuery); $(document).ready(function () $(#scrollDiv).Scroll( line: 1, speed: 500, timer: 2021 ); ); /script /head body p多行滚动演示：/p div id=scrollDiv ul li这是公告标题的第1行/li li这是公告标题的第2行/li li这是公告标题的第3行/li li这是公告标题的第4行/li li这是公告标题的第5行/li li这是公告标题的第6行/li li这是公告标题的第