/** 文字滚动 **/ var WordScroll = function (area, list, options) { this._init(area, list, options); }; WordScroll.prototype = { _init: function (area, list, options) { this.area = $(area); this.list = $(list); this._setOptions(options); this.speed = this.options.speed; this.step = this.options.step; this.index = 1; this.num = this.list.find("li").length; }, _start: function () { var self = this; setInterval(function () { self._run(); }, this.speed); }, _run: function () { if (this.index < this.num) { this.index++; this.list.animate({ "marginTop": "-=" + this.step }, 500); } else { this.index = 1; this.list.animate({ "marginTop": 0 }, 1); } }, _setOptions: function (options) { this.options = { speed: 1, step: 0 }; $.extend(this.options, options); } }
<!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> <title></title> <style type="text/css"> .area { width: 400px; height: 50px; border: solid 1px #000000; line-height: 50px; padding: 0px 10px; overflow: hidden; } .area * { margin: 0px; padding: 0px; } .area ul li { list-style: none; padding: 0px 10px; } .arealist { margin-top: -0px; } </style> </head> <body> <div class="area"> <ul class="arealist"> <li>新闻一</li> <li>新闻二</li> <li>新闻三</li> </ul> </div> </body> </html> <script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="../../js/jone.js" type="text/javascript"></script> <script src="WordScroll.js" type="text/javascript"></script> <script type="text/javascript"> var _wordScroll = new WordScroll(".area", ".arealist", { "speed": 1500, "step": "50" }); _wordScroll._start(); </script>