gpt4 book ai didi

javascript - 在垂直自动滚动和循环垂直自动滚动中防止 "jump"

转载 作者:太空宇宙 更新时间:2023-11-04 15:32:09 27 4
gpt4 key购买 nike

我的垂直自动滚动似乎在某些点不规律地停止,我想要一个平滑的滚动。其次,我希望垂直滚动自动重置(几乎无限循环或暗示它永无止境而不仅仅是跳跃)。我将如何着手完成这个?到目前为止,这是我的代码:http://jsfiddle.net/8KjX8/78/ .

HTML

<div id="wrapper">
<ul>
<li><div id='activity_date'>06/11/2012</div></li>
<li><div id='activity_date'>06/11/2012</div></li>
<li><div id='activity_date'>06/11/2012</div></li>
<li><div id='activity_date'>06/11/2012</div></li>
<li><div id='activity_date'>06/11/2012</div></li>
<li><div id='activity_date'>06/11/2012</div></li>
</ul>
</div>

CSS

#activity_date {
background-color: #cc0066;
color: #FFF;
width: 80px;
}
#wrapper {
height: 240px;
overflow: hidden;
}
#wrapper ul {
position: relative;
list-style-type: none;
}
#wrapper li {
height: 30px;
line-height: 12px;
list-style-type: none;
}
​​

JS

(function(){
var i = 0;

function Scroll() {
i++;

if (i < $('li').length) { // scroll down till we are at the last item
$('ul').animate({top:'-=30'+'px'}, 1000);
}
}

$(document).ready(function() {
var timeOut;

$('ul').hover(
function(e) { // on hover in, stop the animation
clearTimeout(timeOut);
},
function(e) { // on hover out, continue
timeOut = setInterval(Scroll, 1000);
}
);

timeOut = setInterval(Scroll, 1000); // start the animation at document load

});

})();

提前致谢!

最佳答案

动画会自动改变速度。这称为“缓动”,动画的两个标准选项是摆动和线性。 Swing 是默认设置,会导致先快后慢的外观。通过在动画中指定线性,你应该摆脱这个问题:

$('ul').animate({top:'-=30'+'px'}, 1000, 'linear');

无限循环要复杂得多。你要做的是把你所有的内容放在一系列绝对定位的容器中,然后让它们中的每一个都向上移动,并设置一个检测函数来告诉容器何时完全离开视野,然后继续将其设置到列表的末尾。

关于javascript - 在垂直自动滚动和循环垂直自动滚动中防止 "jump",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13256888/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com