1

サイト内に実装しようとしている JQuery アニメーションに問題があります。

一般的な考え方は、ページのフッターを 2 つの TD に分割することです。セクション 1 は、セクション 2 でスクロールしているメッセージに応じて変化するアイコンです。

私のHTMLは基本的に次のようになります。

<div id="footer">
    <div class="box-ticker round">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:60px;">
            <tr>
                <td style="width:12%;background:#6dc5ed;" align="center" valign="middle"><img id="image_scroll" /></td>
                <td style="width:88%;background:#9f88e2;padding;10px" class="biggest" valign="middle">
                    <div id="ticker"></div>
                </td>
            </tr>
        </table>
    </div>
</div>

これを更新する私のコード:

編集: 変数「html」は、JSON の不適切な名前の配列です。これには、入力しているデータが含まれています。例: html[0] = {'title':'これはメッセージです', 'icon':'icon.png'}

$('#ticker').html("<span class='scrollingtext' id='scroll_text'></span>");
cur_index=0;
max_index=html.length;
$(document).ready(function() {
    $('.scrollingtext').bind('marquee', function() {
        if (cur_index >= max_index) { cur_index = 0; }
        obj = JSON.parse(html[cur_index]);
        $('#image_scroll').attr('src',"img/"+obj.icon);
        $('#scroll_text').html(obj.title);
        var scrolling_text = $('#scroll_text');
        var text_container = $('#ticker');
        var tw = scrolling_text.width();
        var ww = text_container.width();
        scrolling_text.css({ right: -tw });
        scrolling_text.animate({ right: ww }, 30000, 'linear', function() {
            cur_index++;
            scrolling_text.trigger('marquee');
        });
    }).trigger('marquee');
});

そして最後に私のCSS：

.box-ticker{
    width:100%;
    height:56px;
    background:#d44d4d;
}    

.round { border-radius: 20px; }

.scrollingtext{
    position:absolute;
    vertical-align:middle;
    white-space:nowrap;
    font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
    font-size:30px;
    float: right;
    color:#FFFFFF;
}

問題は、メッセージが画面をスクロールするときに、「ティッカー」DIV にロックされているようには見えず、ページの下部を直接スクロールするだけで、そこにあるすべての DIV タグを無視しているように見えることです。オブジェクトが chrome コンソール内で更新されているのを観察すると、HTML が正しい場所に表示されているようです。

また、アニメーションの後にドットが続いているように見えるという奇妙な問題もあります。これは、Firefox 内では発生しないようです。

どんな提案でも大歓迎です。

ありがとうございました！

4

1 に答える 1

1

よし見つけた。問題は CSS にあるようです。作業例はこちら

これを CSS に追加します

#ticker{width:100%;overflow:hidden; display:block; }

.scrollingtext{
position:relative;
vertical-align:middle;
white-space:nowrap;
font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
font-size:30px;
float: right;
color:#FFFFFF;
}

注: jsfiddle で動作するように、html オブジェクトを変更する必要がありました。自分のコードに問題がなければ、js コードを無視できます。

于 2013-08-28T00:50:12.850 に答える