0

次のJavaScriptコードでは、メッセージが大きすぎて複数の画面幅にまたがる場合、メッセージが切り捨てられます。警告ステートメントを配置したところ、メッセージ全体がWebメソッドからJavaScriptコードに送信されていることがわかりましたが、メッセージを表示している間、メッセージは切り捨てられています。私はJavaScriptの初心者なので（このコードはWebから取得したコードビットを組み合わせたものです）、どんな助けでも大歓迎です。よろしくお願いします。

$(document).ready(function() {

    //initialize ul;
    $("#scroller").html("");
    var tkhtml = '';
    var successReq = false;


    $.ajax({
        type: "POST",
        url: "GetDataFromWebMethod.aspx/GetDataForTicker",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            var y = msg.d;
            var x = y.split('~');
            alert(x.length);

            if (x != '') {
                for (n = 0; n < x.length; n++) {
                    tkhtml = tkhtml + '<li>' + x[n] + '</li>';
                }
                alert(tkhtml);
                $("#scroller").html(tkhtml);
                successReq = true;
            }
        },
        error: function(msg) {
            alert("Entered Failure");
        }

    });


    var successReq = false;

    var interval = setInterval(function() {
        if (successReq) {
            clearInterval(interval);
            javacode();
        }
    }, 100);

    function javacode() {
        var speed = 2;
        var items, scroller = $('#scroller');
        var width = 0;

        scroller.children().each(function() {
            width += $(this).outerWidth(true);
        });
        scroller.css('width', width);
        scroll();
        function scroll() {
            items = scroller.children();
            var scrollWidth = items.eq(0).outerWidth();
            scroller.animate({ 'left': 0 - scrollWidth }, scrollWidth * 100 / speed, 'linear', changeFirst);
        }
        function changeFirst() {
            scroller.append(items.eq(0).remove()).css('left', 0); scroll();
        }
    }


});

私のCSSは次のとおりです。

<style type="text/css"> 
    #scroller { height: 100%; margin: 0; padding: 0; line-height: 30px; position: relative; } 
    #scroller li { float: left; height: 30px; padding: 0 0 0 10px; list-style-position: inside; }
    #scrollerWrapper { height: 30px; margin: 30px; overflow: hidden; border: 1px #333 solid; background: #F2F2F2; } 
</style>
4

1 に答える 1

0

またはがそのように#scroller設定されているwidth:100%と仮定すると、ウィンドウの幅に切り捨てられます。試してみてくださいbodyhtmlwidth:auto

編集：：

わかりましたので、それぞれの li はfloat:leftであり、ドキュメントの標準的な流れから外れています。display:inlineまたはを使用してみてくださいdisplay:inline-block

于 2012-02-10T21:54:23.510 に答える