本文是小編參考網(wǎng)絡(luò)上的一個小demo，自己做了下擴展，原來是向上滾動的，擴展了一個向下滾動的方法，具體實例代碼如下所示：
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>滾屏實驗</title><style type="text/css">ul,li{margin:0;padding: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) {//參數(shù)初始化if (!opt) var opt = {};var _this = this.eq(0).find("ul:first");var lineH = _this.find("li:first").height(), //獲取行高line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滾動的行數(shù)，默認(rèn)為一屏，即父容器高度speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷動速度，數(shù)值越大，速度越慢（毫秒）timer = opt.timer ? parseInt(opt.timer, 10) : 2000; //滾動的時間間隔（毫秒）if (line == 0) line = 1;var upHeight = 0 - line * lineH;var downHeight=line * lineH - 0;//滾動函數(shù)scrollUp = function () {_this.animate({ marginTop: upHeight },speed,function () {for (i = 1; i <= line; i++) {_this.find("li:first").appendTo(_this);}_this.css({ marginTop: 0 });});},//向下滾動函數(shù)scrollDown = function () {_this.animate({ marginTop: downHeight },//動畫展示css樣式speed,function () {_this.find("li:last").prependTo(_this);_this.css({ marginTop: 0 });})}var timerID//鼠標(biāo)事件綁定_this.hover(function () {clearInterval(timerID);}, function () {timerID = setInterval("scrollDown()", timer);//這里調(diào)用向下或者向上滾動函數(shù)}).mouseout();}})})(jQuery);$(document).ready(function () {$("#scrollDiv").Scroll({ line: 1, speed: 500, timer: 2000 });});</script></head><body><p>多行滾動演示：</p><div id="scrollDiv"><ul><li>這是公告標(biāo)題的第1行</li><li>這是公告標(biāo)題的第2行</li><li>這是公告標(biāo)題的第3行</li><li>這是公告標(biāo)題的第4行</li><li>這是公告標(biāo)題的第5行</li><li>這是公告標(biāo)題的第6行</li><li>這是公告標(biāo)題的第7行</li><li>這是公告標(biāo)題的第8行</li></ul></div></body></html>以上所述是小編給大家介紹的jQuery實現(xiàn)公告新聞自動滾屏效果實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
