Question

我对css了解不多，但我认为这段代码可以帮助我生成一个字幕。基本上我想要用方块完成的动画，用文本完成。

我的主要问题出现在动画中，它不是很流畅，我希望它更流畅，它从容器的末端开始向左。我该怎么做？我将非常感激。

<div id="horizontalScroller">
 <div>it is a message a little more of 100 characteres</div>
 <div>it is a message a little more of 110 characteres</div>
 <div>it is a message a little more of 120 characteres</div>
 <div>it is a message a little more of 130 characteres</div>
</div>

window.horizontalScroller = function($elem) {
    var left = parseInt($elem.css("left"));
    var temp = -1 * $('#horizontalScroller > div').height();
    if(left < temp) {
        left = $('#horizontalScroller').height()
        $elem.css("left", left);
    }
    $elem.animate({ left: (parseInt(left)-60) }, 900, function () {
      window.horizontalScroller($(this))
    });
}


$(document).ready(function() {
    var i = 0;
    $("#horizontalScroller > div").each(function () {
          $(this).css("left", i);
          i += 60;
          window.horizontalScroller($(this));
    });
});

http://jsfiddle.net/hhcbtyyg/

Answer 1

你可以：

window.horizontalScroller = function($elem)
{
    var left = parseInt($elem.css("left"));

    $elem.animate({ left: (parseInt(left)-60) }, 900, function ()
    {
      // get the current left of the element
      var currentLeft = parseInt($(this).css("left"));
      // get the width of the element
      var width       = $(this).width();
      // get the container
      var container   = $(this).parent("#horizontalScroller");
      // get the width of the container
      var containerWidth = $(container).width();

      // check if the element goes out of the view item X + item w < 0
      if ((currentLeft + width) <= 0)
      {
        // put it on the opposite side: simply container w + item w
        $(this).css("left", (containerWidth + width) + "px");
      }

      window.horizontalScroller($(this))
    });
}

我只是不明白为什么在上面的代码中使用height。如果有什么我不知道的事情让我知道。

更新：

默认情况下，项目显示在最左侧：

$(document).ready(function() {
    var container  = $("#horizontalScroller");
    var children   = $(container).children();
    var containerW = $(container).width();

    // Loop through each item of container
    for (var i = 0; i < children.length; i++)
    {
      var item  = children[i];
      var itemW = $(item).width();
      // this is simply the space between them, remove if you don't need it
      var padding = 10 * (i + 1);

      // simply: padding + Container Width + (Item Width * (i + 1))
      // (Item Width * (i + 1)) because you need to position each element beside each other.
      $(item).css("left", (padding + containerW + itemW * (i + 1)) + "px");
      window.horizontalScroller($(item));
    }
});

your updated fiddle

希望有所帮助

Answer 2

嗨检查了这个版本的jsfiddle，我做了一些修改，因为你的动画是从div的高度值开始的。检查一下，我试着在你的css中匹配你的css和宽度的高度，我只是注意到你的js中的“left”var得到你元素的高度。

CSS：

#horizontalScroller {
position: absolute;
width:300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}

也许您可以获得一些如何以响应方式完成它的提示。 JSFIDDLE

生成动画，好像它是一个选框

2 个答案: