基于图像宽度的偏移 div

Question

我正在尝试偏移包含具有21帧的图像的元素。0 - 21.我在图像上放置了 21 个垂直列，以可视化当用户的光标位于列行内时应存在的帧。因此，每次光标移动到网格的不同列中时，它都应该显示一个新帧。我需要帮助弄清楚最后一帧（20）仅在用户光标位于帧最右侧的最后一个像素上时才显示乳清？所有的工作都是在javascript中完成的。我已经评论了每个步骤，并打印到控制台有关数学的有用信息。https://jsfiddle.net/JokerMartini/2e9awc4u/67/window.onload = function() {  console.log('go')  $("#viewport").mousemove(function(e) {    // step 0: value to offset each frame (without scale)    const frameWidth = 320    // step 1: get the current mouse position in relation to the current element    const x = e.offsetX    // step 3: get width of viewable content, subtract 1 pixel starts at 0px    const viewWidth = $("#viewport").width() - 1    // step 4: find the % of the current position (in decimals 0-1.0)    const percent = x / viewWidth    // step 5: find the frame by the current percentage    const filmstripWidth = $("#filmstrip").width()    const frameByPercent = Math.round((filmstripWidth - frameWidth) * percent)    // step 6: find the nearest multiplier to frameWidth to offset    const offset = Math.floor(frameByPercent / frameWidth) * frameWidth    // const offset = -frameByPercent // smooth    // step 7: set that as the current position in negative (for offset reasons)    $("#filmstrip").css('transform', 'translate(' + -offset + 'px)')        console.log(      'CURSOR:', x,      'VIEW:', viewWidth,      'PERCENT:', percent,      'IMAGE WIDTH:', filmstripWidth,      frameByPercent    )  });};html {  height: 100%;  width: 100%;}#filmstrip {  will-change: transform;  pointer-events:none;}#margin-center {  background: grey;  padding: 30px}#viewport {  height: 180px;  width: 320px;  background: #FFFFAA;  display: block;  margin: auto;  position: relative;  overflow: hidden; /* Comment for debugging */}

Answer 1

您的结果被偏移 1，因为您扣除了一个完整的帧宽度。

添加了代码以将百分比上限为 0.999，以防止其跳转到第 22 帧。鼠标移动位置有时会位于结束位置或更大位置。

window.onload = function() {

  console.log('go')

  $("#viewport").mousemove(function(e) {

    // step 0: value to offset each frame (without scale)

    const frameWidth = 320

    // step 1: get the current mouse position in relation to the current element

    const x = e.offsetX

    // step 3: get width of viewable content, subtract 1 pixel starts at 0px

    const viewWidth = $("#viewport").width() - 1

    // step 4: find the % of the current position (in decimals 0-1.0)

    const percent = x / viewWidth

    // step 5: find the frame by the current percentage

    const filmstripWidth = $("#filmstrip").width()

    const frameByPercent = Math.round((filmstripWidth) * Math.min(percent,0.999))

    // step 6: find the nearest multiplier to frameWidth to offset

    const offset = Math.floor(frameByPercent / frameWidth) * frameWidth

    // const offset = -frameByPercent // smooth

    // step 7: set that as the current position in negative (for offset reasons)

    $("#filmstrip").css('transform', 'translate(' + -offset + 'px)')

    

    console.log(

      'CURSOR:', x,

      'VIEW:', viewWidth,

      'PERCENT:', percent,

      'IMAGE WIDTH:', filmstripWidth,

      frameByPercent

    )

  });

};

html {

  height: 100%;

  width: 100%;

}

#filmstrip {

  will-change: transform;

  pointer-events:none;

}

#margin-center {

  background: grey;

  padding: 30px

}

#viewport {

  height: 180px;

  width: 320px;

  background: #FFFFAA;

  display: block;

  margin: auto;

  position: relative;

  overflow: hidden; /* Comment for debugging */

}

#guides {

  position: absolute;

  top: 0;

  left: 0;

  pointer-events:none;

}

#content {

  display: inline-block;

  font-size: 0;

  height: auto;

  max-width: 400px;

  width: 100%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">

  <div id="margin-center">

    <div id='viewport'>

    <img id='filmstrip' src="https://i.ibb.co/7XDpcnd/timer.jpg" width="auto" height="180">

      <svg id="guides" width="320px" height="180px">

        <defs>

          <pattern id="grid" width="15.238" height="180" patternUnits="userSpaceOnUse">

            <path d="M 16 0 L 0 0 0 180" fill="none" stroke="black" stroke-width="1" />

          </pattern>

        </defs>

        <rect width="100%" height="100%" fill="url(#grid)" />

      </svg>

    </div>

  </div>

</div>