亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

基于圖像寬度的偏移 div

基于圖像寬度的偏移 div

肥皂起泡泡 2022-08-27 14:37:49
我正在嘗試偏移包含具有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 */}
查看完整描述

1 回答

?
ABOUTYOU

TA貢獻1812條經驗 獲得超5個贊

您的結果被偏移 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>


查看完整回答
反對 回復 2022-08-27
  • 1 回答
  • 0 關注
  • 100 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號