Question

在下面的JavaScript代码中，当我传递的消息太大而跨越多个屏幕宽度时，消息被截断。我已经发出警告声明并发现整个消息来自web方法到javascript代码，但在显示它时，它正在截断这些消息。由于我是JavaScript的新手（这段代码是我从网上得到的代码位的混合），所以非常感谢任何帮助。提前感谢您的帮助。

$(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>

Answer 1

听起来我将#scroller设置为width:100%，假设body或html被设置为这样，它会截断到窗口宽度。您应该尝试width:auto

编辑::

好的，所以每个li都是float:left，它将它从文档的标准流程中取出。尝试使用display:inline或display:inline-block

Javascript-Jquery-Ajax自动收录器消息被截断

1 个答案: