我正在嘗試偏移包含具有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 */}