jQuery移动控件,同时将鼠标移动到另一个元素上

时间:2017-09-18 04:16:46

标签: javascript jquery css

我有一个包含时间范围的div。移动鼠标时,我还有一个div的滚动条。当鼠标在时间范围内移动时,我试图将时间控制与滚动一起移动。问题是时间控制不会根据鼠标移动而移动。

这是我做的:



$('#timeTable').on('mousemove', function(e) {
  var xPrev = 600;
  var inc = 0;
  var position = $('#nowTime').offset().left;
  var leftOffset = $(this).offset().left;
  if (xPrev < e.pageX) {
    inc = -255;
  }
  $('#timeTableInner').css('left', -e.clientX + leftOffset + inc);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<time id="nowTime">10:00</time>
<div id="timeTable">
  <div id="timeTableInner">
 <ul id="timeText">
     <li class="t0000"><span class="hourText">0:00</span></li>
     <li class="t0015">&nbsp;</li>
     <li class="t0030">&nbsp;</li>
         ------------
      <li class="t2400"><span class="hourText">24:00</span></li>
  </ul>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

请检查。

这是你想要的吗?

check my updated fiddle here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<time id="nowTime">10:00</time>
<div id="timeTable">
    <div id="timeTableInner">
        <ul id="timeText">
            <li class="t0000"><span class="hourText">0:00</span></li>
            <li class="t0015">&nbsp;</li>
            <li class="t0030">&nbsp;</li>
            <li class="t2400"><span class="hourText">24:00</span></li>
        </ul>
    </div>
</div>