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

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/

IE：

...
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

这是基于 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 4

简单地

用 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 5

如果您将更改 div 选框的宽度，那么您的问题就会解决。

marquee.css({"溢出": "隐藏", "宽度": "100%"});

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