javascript - 使用 jQuery 获取 LI 的高度，以便新闻行情向上滚动所需的确切数量

Question

我正在使用来自 http://www.yourinspirationweb.com/en/jquery-how-to-create-a-news-ticker-with-just-a-few-javascript-lines/的脚本

这是一个很棒的新贴纸，旨在一次只向上滚动一篇文章，然后在最后以连续循环再次附加它。但是这个脚本的限制是每个

必须与彼此的高度相同，这并不总是可能的。

我一直在尝试修改脚本，以便它自动获得“#ticker li:first”的外部高度。并滚动它，使 marginTop 等于该外部高度的负数。而不是默认的“-120px”。但是我意识到它是用 CSS 样式编写的，我不知道如何重写它。帮助！

这是原始脚本：

$(function()
{
    var ticker = function()
    {
        setTimeout(function(){
            $('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
            {
                $(this).detach().appendTo('ul#ticker').removeAttr('style'); 
            });
            ticker();
        }, 4000);
    };
    ticker();
}); 

Answer 1

这应该可以解决问题。只需将高度放入一个变量中，乘以 -1（得到所需的负数），然后将其放入marginTop属性中：

$(function() {
    var ticker = function() {
        setTimeout(function() {
            // get the height of the li element, multiply by -1 to be negative
            var h = parseInt($("#ticker li:first").outerHeight()) * -1; 
            $('#ticker li:first').animate( {marginTop: h + 'px'}, 800, function() {
                $(this).detach().appendTo('ul#ticker').removeAttr('style'); 
            });
            ticker();
        }, 4000);
    };
    ticker();
});

Answer 2

要使用 jQuery 检索 html 元素的 outerHeight（包括边框、填充和可选的边距），请执行以下操作$(element).outerHeight()

要使用 jQuery 检索 html 元素的 innerHeight，请执行以下操作$(element).innerHeight()

$(function()
{
    var ticker = function()
    {
        setTimeout(function(){
            var oHeight = $('#ticker li:first').outerHeight();
            $('#ticker li:first').animate( {marginTop: -oHeight}, 800, function()
            {
                $(this).detach().appendTo('ul#ticker').removeAttr('style'); 
            });
            ticker();
        }, 4000);
    };
    ticker();
});

默认单位是像素，因此您不必担心将 px 附加到值。