联系官方销售客服

1835022288

028-61286886

POSCMS 版主:POSCMS负责人
这个函数只能用一次 怎么做可以无限用 文字滚动的功能
类型:POSCMS 更新时间: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
    0
    这前端问题 让我看的很醉 就不能代码高亮?
  • 小车手
    #2楼    小车手
    2017-08-30 20:05:33
    0
    【苏先生】1楼
    用他的分享帖里面的方法吧,你这个代码看着好累啊