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

时间：2021-05-26

本文是小编参考网络上的一个小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) {//参数初始化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), //每次滚动的行数，默认为一屏，即父容器高度speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）timer = opt.timer ? parseInt(opt.timer, 10) : 2000; //滚动的时间间隔（毫秒）if (line == 0) line = 1;var upHeight = 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: downHeight },//动画展示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: 2000 });});</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>这是公告标题的第7行</li><li>这是公告标题的第8行</li></ul></div></body></html>

以上所述是小编给大家介绍的jQuery实现公告新闻自动滚屏效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章