1

http://www.yourinspirationweb.com/en/jquery-how-to-create-a-news-ticker-with-just-a-few-javascript-lines/のスクリプトを使用してい ます

これは、一度に 1 つの記事だけをスクロールアップしてから、連続ループの最後に再度追加するように設計された優れたニュースステッカーです。しかし、このスクリプトの制限は、それぞれのニュース項目が

  • お互いに同じ高さである必要がありますが、これは常に可能であるとは限りません。

    '#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();
});
    • 4

    2 に答える 2

    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();
});
    于 2012-06-26T22:54:25.440 に答える
    0

    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 を追加する必要はありません。

    于 2012-06-26T22:56:33.010 に答える