我想做一个函数，但我不能用 JavaScript

Question

我想做一个函数，比如当内部文本大于 div 大小时，内部文本从左到右自动无限移动。

我尝试过的

// chart movement
var chartMove = $(".chart_movement").width();
var chartMovetext = $(".chart_movement")[0].scrollWidth;

if (chartMovetext > chartMove) {
  function chart_title_move() {
    $(".chart_movement_text")
      .animate({
          left: "-40px",
          right: "40px",
        },
        5000
      )
      .delay(1200);
    $(".chart_movement_text")
      .animate({
          left: "40px",
          right: "-40px",
        },
        5000,
        function() {
          chart_title_move();
        }
      )
      .delay(1200);
  }
  chart_title_move();
}

.innerTextMove {
  overflow: scroll;
  position: absolute;
  letter-spacing: 0.5px;
  position: absolute;
  width: auto;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 6px;
}

.chartTitleGuide {
  width: 185px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-start-3 col-span-3 grid justify-center items-center chartTitleGuide"><span class="chart_movement_text">name</span></div>
<div class="col-start-6 col-end-8 grid justify-center items-center chartTitleGuide"> <span class="chart_movement_text">Name</span></div>

问题是var chartMovetext = $(".chart_movement")[0].scrollWidth;每次都返回0。

希望我能得到一些关于如何实现它的信息。

Answer 1

我对您所做的事情有一些看法，但无法为您提供完整的解决方案，因为您没有为拼图提供所有必要的部分。例如：

• 您尚未确定 inner text 或 div 的大小。您是指跨度内的文本，还是 .chartTitleGuide 容器的大小，还是 .chart-movement 容器的大小？
• 您的示例 html 没有 .chart-movement 容器，但您的 jQuery 引用了它。它应该去哪里？我加了一个……但我在猜测。不用我猜，例子应该很清楚
• 您缺少 .innerTextMove 容器 - 否则，请从您的示例中删除该 css
• 您希望在页面上发生的操作确实不清楚。 inner text moving left to right 是什么意思？
• （忘了提）：你的chart_movement_text span 的宽度为 0，因为 span 元素是内联元素 - 你必须将它们转换为块元素才能获得 scrollWidth 值 （你可以看到我在css中做到了）。

下面，我为您创建了一个稍微改进的示例 - 但我只是在猜测。请查看我所做的并将其修复为更正确的示例。

然后，请为这个问题选择一个正确的答案（以结束这个问题），然后提出一个新问题明确您希望用户在页面上看到的内容。这样做可以最快地回答您的问题。

// chart movement
var chartMove = $(".chart-movement").width();
var chartTitleGuide = $(".chartTitleGuide").width();
var chartMoveText = $(".chart_movement_text")[0].scrollWidth;

console.log(`CM Width: ${chartMove}`);
console.log(`CTG Width: ${chartTitleGuide}`);
console.log(`CMT Width: ${chartMoveText}`);

if (chartMoveText > chartTitleGuide) {
  console.log('Yup in here');
  chart_title_move();
}

function chart_title_move() {
  $(".chart_movement_text")
    .animate({
        left: "-40px",
        right: "40px",
      },
      5000
    )
    .delay(1200);
  $(".chart_movement_text")
    .animate({
        left: "40px",
        right: "-40px",
      },
      5000,
      function() {
        chart_title_move();
      }
    )
    .delay(1200);
}

.innerTextMove {
  overflow: scroll;
  position: absolute;
  letter-spacing: 0.5px;
  position: absolute;
  width: auto;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 6px;
}

.chartTitleGuide {
  width: 185px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.chart_movement_text{
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chart-movement">
  <div class="col-start-3 col-span-3 grid justify-center items-center chartTitleGuide">
    <span class="chart_movement_text">name of an interesting and length text</span>
  </div>
  <div class="col-start-6 col-end-8 grid justify-center items-center chartTitleGuide">
    <span class="chart_movement_text">Name</span>
  </div>
</div>

Answer 2

我认为我们没有 .scrollWidth，您可以使用 .scrollLeft()。 我的意思是：

var chartMove = $(".chart_movement").width();
var chartMovetext = $(".chart_movement")[0].scrollLeft();

把剩下的放在它下面。

if (chartMovetext > chartMove) {
    function chart_title_move() {
      $(".chart_movement_text")
        .animate(
          {
            left: "-40px",
            right: "40px",
          },
          5000
        )
        .delay(1200);
      $(".chart_movement_text")
        .animate(
          {
            left: "40px",
            right: "-40px",
          },
          5000,
          function () {
            chart_title_move();
          }
        )
        .delay(1200);
    }
    chart_title_move();
  }