用滑块对齐文本

Align text with a slider

本文关键字：文本对齐更新时间：2023-09-26

我有一个这样的表结构

<tr>
    <td>
      Text to move
    </td>
</tr>
<tr>
    <td>
       <div>jQuery slider container is in here<a>slider pointer is in here</a></div>
    </td>
</tr>

当滑块移动时，我看到link元素的样式更新了一个百分比，表示它向右移动了多远。Ex: style="left: 11.7647%;"我想让"text to move"与滑块对齐，并按该百分比移动。有什么办法可以帮我吗?如果需要，我可以添加更多div/span等。

注意:我知道如何抓取滑动条移动的百分比，问题只是对齐它。

既然您已经知道了百分比，那么您可以设置文本的左距为相同的百分比:

$("#hoverText").css("margin-left", percent + "%");

下面是我的工作测试代码:

<标题> HTML

<table id="layoutTable" style="width:100%;">
  <tr>
    <td>Percent: <span id="percent"></span></td>
  </tr>
  <tr>
    <td style="width:100%;"><span id="hoverText">Here's Some Text</span></td>
  </tr>
  <tr>
    <td style="width:100%;"><div id="slider"></div></td>
  </tr>
</table>

<标题> JavaScript h1> /html>

用滑块对齐文本

Align text with a slider

标记上居中不起作用