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);