如何使用Jquery .animate()函数创建连续滚动内容? [英] How to create continuous scrolling content using Jquery .animate() function?
本文介绍了如何使用Jquery .animate()函数创建连续滚动内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
可能重复:
在jquery中实现循环滚动条
我想创建垂直滚动条,它将像字幕一样工作。但我希望它是连续的,就像当我们使用选框时,整个内容只有在它完全上升后才会回来,但我希望它是连续的。
I want to create vertical scroller, which will work exactly like marquee. But I want it to be continuous, like when we use marquee the whole content comes back only after it completely goes up, but I want it to be continuous.
这就是我所拥有的...... http: //jsfiddle.net/JWfaf/1/
this is what I have... http://jsfiddle.net/JWfaf/1/
我只希望在一个方向上继续滚动。我希望我已经清除了我想要实现的目标
I want only in one direction and keep on scrolling. I hope I have cleared what I want to achieve
HTML
<div class="con">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
JavaScript
JavaScript
function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "+=250px"},
{
duration: speed,
complete: function ()
{
targetElement.animate({ marginTop: "-=250px" },
{
duration: speed,
complete: function ()
{
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('.con ul li:first-child'), 10000);
推荐答案
工作演示: http:// jsfiddle。 net / rNXs9 / 1 /
HTML:
<div id="verticalScroller">
<div>1 Lorem ipsum dolor sit</div>
<div>2 Lorem ipsum dolor sit</div>
<div>3 Lorem ipsum dolor sit</div>
<div>4 Lorem ipsum dolor sit</div>
</div>
CSS:
#verticalScroller {
position: absolute;
width:52px;
height: 180px;
overflow: hidden;
}
#verticalScroller > div {
position:absolute;
width:50px;
height:50px;
}
JS:
window.verticalScroller = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if(top < temp) {
top = $('#verticalScroller').height()
$elem.css("top", top);
}
$elem.animate({ top: (parseInt(top)-60) }, 600, function () {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
var i = 0;
$("#verticalScroller > div").each(function () {
$(this).css("top", i);
i += 60;
window.verticalScroller($(this));
});
});
这篇关于如何使用Jquery .animate()函数创建连续滚动内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文