我写了一些工作示例。有JsFiddle 上的实例 http://jsfiddle.net/x47Te/3/。这个想法是创建一个position=relative的容器,并将带有文本的div放入其中。此外,我们需要创建文本副本,以避免显示文本最后一部分时出现空白。 jQuery animate() 函数将完成剩下的工作。
HTML:
<div class="news_container">
<div class="news">
<div class="text">
Long text
</div>
</div>
</div>
CSS:
.news_container {
border: 1px solid black;
width:150px;
height: 300px;
overflow: hidden;
position: relative;
padding: 3px;
}
.news {
position: absolute;
left: 0px;
top: 0px;
}
JavaScript:
(function($, undefined) {
$.fn.loopScroll = function(p_options) {
var options = $.extend({
direction: "upwards",
speed: 60
}, p_options);
return this.each(function() {
var obj = $(this).find(".news");
var text_height = obj.find(".text").height();
var start_y, end_y;
if (options.direction == "downwards") {
start_y = -text_height;
end_y = 0;
} else if (options.direction == "upwards") {
start_y = 0;
end_y = -text_height;
}
var animate = function() {
// setup animation of specified block "obj"
// calculate distance of animation
var distance = Math.abs(end_y - parseInt(obj.css("top")));
//duration will be distance / speed
obj.animate(
{ top: end_y }, //scroll upwards
1000 * distance / options.speed,
"linear",
function() {
// scroll to start position
obj.css("top", start_y);
animate();
}
);
};
obj.find(".text").clone().appendTo(obj);
$(this).on("mouseover", function() {
obj.stop();
}).on("mouseout", function() {
animate(); // resume animation
});
obj.css("top", start_y);
animate(); // start animation
});
};
}(jQuery));
$(".news_container").loopScroll();
选项:
-
direction
(“向下”或“向上”)- 文本移动的方向;
-
speed
- 移动速度。
以下是使用此插件和选项的示例:
$("#example3").loopScroll();
$("#example4").loopScroll({ speed: 120 });
$("#example1").loopScroll({ direction: "downwards" });
$("#example2").loopScroll({ direction: "downwards", speed: 30 });