所以基本上我看過很多高級影片網站。我嘗試創建一個影像,當我將滑鼠游標與 div 坐標一起移動時,它會跟隨影像。
基本上我的codepen中的代碼是這樣的。
https://codepen.io/myth-vince/pen/PoQJOXj
當您嘗試將游標移動到影像中時..它就像左上角的傳送一樣,因為我認為這是影像的恒定矩形高度或寬度。
如果有人可以幫我解決這個問題。非常感謝。我已經創建了一些像這樣的高級影片,但在此之前從未遇到過這種情況,只是突然傳送。
我相信它與此有關
var rect = e.target.getBoundingClientRect();
console.log(rect)
var x = e.clientX - rect.left; //x position within the element.
var y = e.clientY - rect.top; //y position within the element.
或者可能是 SCSS,但我不知道在哪里,因為一切看起來都很好..但我認為這里唯一真正的問題是因為當我嘗試使它也使影像在滑鼠游標中居中時,它只會自我調整并且不會對齊滑鼠游標的中心,因為它正在避免它傳送。
編輯
有關更多資訊..mouseover和mousemovemousemove 的部分只會在滑鼠懸停在 div 上時開始,因此影像將開始移出。
現在第二個我需要得到e.clientXande.clientY以便它可以得到 div 部分的位置。并且是獲取它的高度rectX和rectY寬度部分
在跨度懸停時在滑鼠游標處顯示 DIV
你可以在這里看到它的鏈接。
我從哪里得到延遲影像的運動在這里
https://stackoverflow.com/questions/9136261/how-to-make-a-setinterval-stop-after-some-time-or-after-a-number-of-actions#:~:text=To stop it running 后,達到 that number clear it。
uj5u.com熱心網友回復:
var rect = e.target.getBoundingClientRect();
有你的問題。
與大多數其他事件型別一樣,mousemove事件通過 DOM冒泡。
當您將游標放在其中一個影像上時 -e.target不再是box那個影像,而是那個特定的影像。因此,您現在處理的不是與getBoundingClientRect您的盒子相關的資料,而是與特定影像相關的資料。
只要你做這個
var rect = box.getBoundingClientRect();
相反,問題消失了。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/480970.html
標籤:javascript css 动画片
上一篇:Javascript顯示下一個prev內容appendchild
下一篇:推入減少的新Map()內的陣列
