Question

我的选框似乎没有显示我放在div中的所有文字。它总是在某个时刻被切断。知道如何让它显示所有文字吗？

这是我目前为止的代码（http://jsfiddle.net/yLwhe/演示）

HTML

<div id="marquee">They came down the village, crossing ghostly forests, almost falling apart. Their bags were full: garlands, amethysts, gold, frankincense, myrrh. Incredible strings arrived with them: heavenly sounds drew water from marble stones, provoking visions never seen before. Who brought those tired magicians? Why had such a music enchanted our sordid souls? Was no answer available? Did we need one? Voices overheard told of incredible tales: children following mice, drowning, dead. Fear turned us into shivering salty statues, unable to look back. Many years later, explorers ventured and found this tiny town, every inhabitant eternally still, imprisoned forever by strange chords.</div>

CSS

#marquee {
    color: #000;
    height: 16px;
    padding-bottom: 5px;
}

JS

$(function() {

    var marquee = $("#marquee"); 
    marquee.css({"overflow": "hidden", "width": "100%"});

    // wrap "My Text" with a span (IE doesn't like divs inline-block)
    marquee.wrapInner("<span>");
    marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
    marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"

    marquee.wrapInner("<div>");
    marquee.find("div").css("width", "200%");

    var reset = function() {
        $(this).css("margin-left", "0%");
        $(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);
    };

    reset.call(marquee.find("div"));

    });

Answer 1

您的原始代码假定100%宽度<span>（即50%宽度200%内的<div>）将容纳整个文字。

我已将其修改为实际计算字符串所需的宽度，然后使用它来制作动画。

检查此修改后的版本：http://jsfiddle.net/yLwhe/5/

即：

...
marquee.find("span").css({ ... }); 

// get the actual used width
var w = marquee.find("span").width();

...
var reset = function() {
    $(this).css("margin-left", "0");

    // use calculated width for animation.
    $(this).animate({ "margin-left": "-"+w+"px" }, 40000, 'linear', reset);

};

Answer 2

工作小提琴：http://jsfiddle.net/yLwhe/6/

首先，要解决文字被切割的问题，请将white-space: nowrap应用于div：

marquee.wrapInner("<div>");
marquee.find("div").css({
    "width": "100%",
    "white-space": "nowrap"
});

否则线条会在到达div的末尾时断开。

其次，您尝试为以下margin-left设置动画：

$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);

这不起作用，因为您所指的100% 不 div本身的宽度或其内容，而是宽度它是容器。你需要这样做：

$(this).animate({ -$(this).find('span').width() + 'px' }, 10000, 'linear', reset);

这会使div完全移动其子spans之一的像素长度。

Answer 3

<强>简单地

使用div在maqrquee标记中包装文本并为其指定类名。最后使用填充到该类。填充值取决于文本的字体大小。

而不是使用此风格

<marquee behavior="alternate" direction="right">Here is marquee text</marquee>

请使用以下示例。

HTML示例：

<marquee behavior="alternate" direction="right"><div class="maqquee_text">Here is marquee text</div></marquee>

CSS示例

div.maqquee_text{padding:10px;}

这适合我。

Answer 4

这是基于techfoobar答案的答案，它不会为小字符串创建重复的跨度，并且无论文本长度如何都具有更均匀的滚动速度：

$(function() {

    var marquee = $("#marquee"); 
    
    marquee.wrapInner("<span>");
   
    var w = marquee.find("span").width();
    var w2 = $(document.body) .width();
    
    if (w < w2) {
        w = w2;
        marquee.css({"overflow": "hidden", "width": "100%", "white-space": "nowrap","text-align":"right"});
    
        marquee.wrapInner("<div>");
        marquee.find("div").css("width", (w)+'px');
    }
    else {
       marquee.css({"overflow": "hidden", "width": "100%", "white-space": "nowrap"});
       marquee.find("span").css({ "width": "auto", "white-space": "nowrap", "display": "inline-block", "text-align":"center", "padding-right": "10px" }); 
       marquee.append(marquee.find("span").clone()); 

       marquee.wrapInner("<div>");
       marquee.find("div").css("width", (w*2)+'px');
   }

   var reset = function() {
       $(this).css("margin-left", "0");
       $(this).animate({ "margin-left": "-"+w+"px" }, w*4.5, 'linear', reset);
   };

   reset.call(marquee.find("div"));
	
});

#marquee {
	color: #000;
	height: 16px;
	padding-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marquee"> They came</div>

Answer 5

如果你要更改div选框的宽度，那么问题就解决了。

marquee.css（{“overflow”：“hidden”，“width”：“100％”}）;

在上面的代码中，如果我们将宽度100％更改为308％，那么它将在FF，Chrome（最新版本）中正常工作，如果我们将宽度100％更改为325％，那么它将在IE中正常工作。

选框不显示所有文本 - 在不同点切断

5 个答案: