基于图像宽度的偏移 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() {&nbsp; console.log('go')&nbsp; $("#viewport").mousemove(function(e) {&nbsp; &nbsp; // step 0: value to offset each frame (without scale)&nbsp; &nbsp; const frameWidth = 320&nbsp; &nbsp; // step 1: get the current mouse position in relation to the current element&nbsp; &nbsp; const x = e.offsetX&nbsp; &nbsp; // step 3: get width of viewable content, subtract 1 pixel starts at 0px&nbsp; &nbsp; const viewWidth = $("#viewport").width() - 1&nbsp; &nbsp; // step 4: find the % of the current position (in decimals 0-1.0)&nbsp; &nbsp; const percent = x / viewWidth&nbsp; &nbsp; // step 5: find the frame by the current percentage&nbsp; &nbsp; const filmstripWidth = $("#filmstrip").width()&nbsp; &nbsp; const frameByPercent = Math.round((filmstripWidth) * Math.min(percent,0.999))&nbsp; &nbsp; // step 6: find the nearest multiplier to frameWidth to offset&nbsp; &nbsp; const offset = Math.floor(frameByPercent / frameWidth) * frameWidth&nbsp; &nbsp; // const offset = -frameByPercent // smooth&nbsp; &nbsp; // step 7: set that as the current position in negative (for offset reasons)&nbsp; &nbsp; $("#filmstrip").css('transform', 'translate(' + -offset + 'px)')&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; console.log(&nbsp; &nbsp; &nbsp; 'CURSOR:', x,&nbsp; &nbsp; &nbsp; 'VIEW:', viewWidth,&nbsp; &nbsp; &nbsp; 'PERCENT:', percent,&nbsp; &nbsp; &nbsp; 'IMAGE WIDTH:', filmstripWidth,&nbsp; &nbsp; &nbsp; frameByPercent&nbsp; &nbsp; )&nbsp; });};html {&nbsp; height: 100%;&nbsp; width: 100%;}#filmstrip {&nbsp; will-change: transform;&nbsp; pointer-events:none;}#margin-center {&nbsp; background: grey;&nbsp; padding: 30px}#viewport {&nbsp; height: 180px;&nbsp; width: 320px;&nbsp; background: #FFFFAA;&nbsp; display: block;&nbsp; margin: auto;&nbsp; position: relative;&nbsp; overflow: hidden; /* Comment for debugging */}#guides {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; pointer-events:none;}#content {&nbsp; display: inline-block;&nbsp; font-size: 0;&nbsp; height: auto;&nbsp; max-width: 400px;&nbsp; width: 100%;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="content">&nbsp; <div id="margin-center">&nbsp; &nbsp; <div id='viewport'>&nbsp; &nbsp; <img id='filmstrip' src="https://i.ibb.co/7XDpcnd/timer.jpg" width="auto" height="180">&nbsp; &nbsp; &nbsp; <svg id="guides" width="320px" height="180px">&nbsp; &nbsp; &nbsp; &nbsp; <defs>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <pattern id="grid" width="15.238" height="180" patternUnits="userSpaceOnUse">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <path d="M 16 0 L 0 0 0 180" fill="none" stroke="black" stroke-width="1" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </pattern>&nbsp; &nbsp; &nbsp; &nbsp; </defs>&nbsp; &nbsp; &nbsp; &nbsp; <rect width="100%" height="100%" fill="url(#grid)" />&nbsp; &nbsp; &nbsp; </svg>&nbsp; &nbsp; </div>&nbsp; </div></div>