业务经理

微信扫描以上二维码

028-61286886

技术咨询

这个函数只能用一次 怎么做可以无限用 文字滚动的功能

开源系统 更新 2017-08-30 20:06:09 刘杰

(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 () {

$("#news_l").Scroll({ line: 1, speed: 500, timer: 2000 });

});




<div id="news_l">

<ul>

<li><a href="">新闻1</a><span>2017-08-28</span> </li>

<li><a href="">新闻1</a><span>2017-08-28</span> </li>

<li><a href="">新闻1</a><span>2017-08-28</span> </li>

<li><a href="">新闻1</a><span>2017-08-28</span> </li>

<li><a href="">新闻1</a><span>2017-08-28</span> </li>

</ul>

</div>


#news_l{width:100%;height:250px;min-height:25px;line-height:50px;overflow:hidden}

#news_l ul{padding:0 10px}

#news_l li{padding:0 5px ;font-size: 14px; height:49px;border-bottom: 1px dashed #e0e0e0;}

#news_l li span{float: right;line-height: 50px; color:#666;font-size: 14px;}

#news_l li a{color: #666;}


方案

  • 苏先生 #1 · 2017-08-30 19:41:29
    这前端问题 让我看的很醉 就不能代码高亮?
  • 小车手 #2 · 2017-08-30 20:05:33
    【苏先生】1楼
    用他的分享帖里面的方法吧,你这个代码看着好累啊

迅睿系统漏洞

导入微信文章
导入微信文章(2026-09-15)
优化排版缺少文字情况
GEO系统
GEO系统(2026-09-15)
运营客户端,防止误触阴影处关闭对话框
独立站群系统
独立站群系统(2026-09-14)
子站独立部署时修复同步附件失败问题
在线客服
在线客服(2026-09-13)
修复删除会话报错问题 删除会话时联动删除聊天图片
在线考试竞赛系统
在线考试竞赛系统(2026-09-12)
增加投票功能 考试功能拓展 注意:更新后需要执行系统更新,更新数...
网上信箱
网上信箱(2026-09-12)
修复新版本兼容问题
GeoSeo收录宝
GeoSeo收录宝(2026-09-12)
1 优化Update.php文件,解决版本在线升级不完整问题 2 ...
GeoSeo工具箱
GeoSeo工具箱(2026-09-11)
修正历史记录推送
微信系统
微信系统(2026-09-11)
增加数据统计总览界面 账号管理增加服务和公众号的区别 菜单管理支持更...
答题系统
答题系统(2026-09-11)
一站式在线答题系统,支持真题考试、题库练习和错题本,适合培训、考证、...