jquery:如何循环一个div [英] jquery: how to loop a div
问题描述
使用 jquery,如何连续自动滚动 div?喜欢本网站的新闻和专题部分:http://animalsasia.org/.而且,当您将鼠标悬停在滑块上时,它会停止滚动,直到您将鼠标悬停.
using jquery, how can i auto scroll a div continuously? like the news and features section of this website: http://animalsasia.org/. And also when you hover over the slider it stops the scrolling until you hover away.
是否有一个 jquery 插件可以做到这一点?任何帮助将不胜感激.
is there a jquery plugin that will do that? Any help would be much appreciated.
推荐答案
我写了一些工作示例.JsFiddle 上的实时示例.这个想法是创建位置=相对的容器,并将带有文本的 div 放入其中.此外,我们需要创建文本的副本以避免在显示文本的最后部分时出现空白.jQuery animate() 函数将完成剩下的工作.
I wrote some working example. There is live example on JsFiddle. The idea is to create container with position=relative, and put div with text into it. Also, we need to create a copy of text to avoid empty space when last part of text is showing. jQuery animate() function will do the rest.
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:
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
- 移动速度.
direction
("downwards" or "upwards") - direction of text movement;speed
- speed of movement.
这是使用此插件的示例:
Here is example of using this plugin with options:
$("#example3").loopScroll();
$("#example4").loopScroll({ speed: 120 });
$("#example1").loopScroll({ direction: "downwards" });
$("#example2").loopScroll({ direction: "downwards", speed: 30 });
这篇关于jquery:如何循环一个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!