我想創建一個函式，但我不會在JavaScript中

我想做一個函式，比如當內部文本大于 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。

希望我能得到一些關于如何實作它的資訊。

uj5u.com熱心網友回復：

我認為我們沒有 .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();
  }

uj5u.com熱心網友回復：

我對你所做的事情有一些觀察，但不能給你一個完整的解決方案，因為你沒有提供所有必要的拼圖。例如：

• 你還沒有確定什么是inner textORdiv大小。你的意思是跨度內的文本與.chartTitleGuide容器的大小，還是.chart-movement容器？
• 您的示例 html 沒有.chart-movement容器，但您的 jQuery 參考了它。它應該去哪里？我加了一個……但我是猜的。我不應該猜測，這個例子應該很清楚
• 您缺少.innerTextMove容器 - 否則，請從您的示例中洗掉該 css
• 您希望在頁面上發生的操作確實不清楚。什么inner text moving left to right意思？
• （忘了提及）：您的chart_movement_textspan的寬度為 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>

標籤：javascript html 查询 css

上一篇：在移動設備上重新排列多個div？

下一篇：如何通過按鈕復制卡片中的物件