我需要制作一堵无限墙,它会从数据库中提取文本并将其显示在墙上。我写了这段代码-
$(function() {
var x = 0;
var y = 100.0;
var z=0;
setInterval(function() {
x -= 0.1;
y -= 0.1;
z++;
if (x <= -100.0){
$("#h1d1").html("loop div 1 :" + z);
x = 0;
}
if (y <= 0){
$("#h1d2").html("loop div 2 :" + z);
y = 100.0;
}
$('#movimg1').css('left', x + "%");
$('#movimg2').css('left', y + "%");
}, 10);
$("#stopbutton").click(function() {
$('#movimg1').stop();
});
})
但是文本的行为并不像我希望的那样。它在我不想要的屏幕中间发生变化。我需要在不可见时更改文本。 https://jsfiddle.net/oa0wdxcx/2/
还有一些事情 - 我想添加一个播放/暂停按钮。任何关于我如何实现这一目标的建议将不胜感激。此外,我希望 div 位于 #wrap div 内,但如果我将位置属性更改为相对,则 div 不会保持在一起。
提前致谢。
最佳答案
问题出在条件上。
if (x <= -100.0) {
z++;
$("#h1d1").html("loop div 1 :" + z);
x = 100; /* change this line */
}
if (y <= -100.0) { /* change this line */
w++;
$("#h1d2").html("loop div 2 :" + w);
y = 100;
}
条件表明,如果这两个 div 中的任何一个达到 left:-100%
,则该元素必须放在 left:100%
的队列末尾。
还有一件事,您可以组合这些 if 语句,并且只使用 x
进行转换。
要使开始和停止按钮起作用,您应该使用 clearInterval()
函数终止模拟以停止,然后调用 doSimulate()
重新开始:
var started = true;
$("#stopbutton").click(function () {
if(started) {
clearInterval(sim);
$(this).html('Start');
started = false;
}else{
doSimulate();
$(this).html('Stop');
started = true;
}
});
这是 jsFiddle With Start/Stop Working.
关于javascript - jQuery : Text on moving div (infinite wall),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33973244/