Question

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

这是一个很棒的newsticker，设计用于一次只向上滚动一篇文章，然后在连续循环中再次追加它。但是这个脚本的限制是每个

中的新闻项必须与彼此的高度相同，这并不总是可行的。

我一直在尝试修改脚本，以便它自动获得'#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附加到值。

使用jQuery获取LI的高度，以便新闻自动收录器向上滚动所需的确切数量

2 个答案: