marquee 跑马灯公告

1.原始 marquee

2.自定义 marquee

.tops {

color: #fff;

height: 23px;

margin: 0 0 0 20px;

min-height: 23px;

overflow: hidden;

}

.tops a {

float: left;

}

.tops li {

height: 23px;

padding-left: 25px;

}

<div class="tops">

<ul>

<li>

<a href="#">top1</a>

</li>

<li>

<a href="#">top2</a>

</li>

</ul>

</div>

$(document).ready(function () {

$(".tops").Scroll();

});

 

(function ($) {

$.fn.extend({

Scroll: function (opt) {

if (!opt) var opt = {line: 1, speed: 1000, timer: 3000};

var oo;

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) : 3000,

timer = opt.timer ? parseInt(opt.timer, 10) : 3000;

if (line == 0) line = 1;

var upHeight = 0 - line * lineH;

scrollUp = function () {

_this.animate({

marginTop: upHeight

}, speed, function () {

for (i = 1; i <= line; i++) {

_this.find("li:first").appendTo(_this);

}

_this.css({ marginTop: 0 });

}

);

};

var timerID = function () {

oo = setInterval("scrollUp()", timer);

};

timerID();

_this.hover(function () {

clearInterval(oo);

}, function () {

timerID();

});

}

});

})(jQuery);