我有一個形象，我想移動的影像從當前位置（它最初放置）到另一個地方，用戶點擊。我的意思是，當用戶單擊 Html 頁面中的任何位置時，影像應該移動到那里，我需要將其設為移動影片，以便影像應該在 3 秒內從當前位置移動到另一個位置（例如）。我怎樣才能做到這一點？可以vanilla JavaScript或有jQuery幫助嗎？無論如何，我只想制作這個影片，但React在我的筆記本電腦上不能有效地作業，所以請在jQuery或 中回答plain JavaScript。
在我的html頁面中：
<img src="./wolf.png" alt="如何制作移動影片，可以將影像從當前位置移動到用戶單擊的位置" style="width:3%;" id="wolf">
在我的 css 檔案中：
#wolf {
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes move {
/*
Need help
*/
}
在 .js 檔案中：
$(document).ready(function() {
// Need help
})
uj5u.com熱心網友回復：
要找出用戶點擊滑鼠游標的位置，您可以使用
document.onclick= function(event) {
pointerX = event.pageX;
pointerY = event.pageY;
}
console.log('Cursor at: ' pointerX ', ' pointerY);
您可以將其與 element.style.translate 中的 translate 結合起來，并將元素從當前位置移動到用戶單擊的位置。
uj5u.com熱心網友回復：
在https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API 上，我們了解到 DOM 元素具有 animate 方法。
var dX = 150, dY = 50; // TODO: proper distance between current and target location
document.getElementById("wolf").animate(
[
{ transform: `translate(${dX}px, ${dY}py)` },
], {
duration: 3000 // should be linked to distance - 3px in 3s is **SLOW**
}
);
要使持續時間取決于距離，您需要指定應該花費這三秒（或其他任何時間）的距離，然后計算行進距離。畢達哥拉斯向我們展示了如何。這是一個 jsfiddle 可以完成所有這些 - 享受：https ://jsfiddle.net/flowtron/0qkuvtd7/
核心有以下計算：
// once on pageload:
screendiagonal = Math.sqrt( screen.width * screen.width screen.height * screen.height ); // Pythagoras
// every move - what are the X and Y distances to travel?
let delta = { x: targetCoord.x - pos[0], y: targetCoord.y - pos[1] };
let curdur = ( Math.sqrt(delta.x*delta.x delta.y*delta.y) / screendiagonal ) * 3000; // Pythagoras - travel distance in time relative to screendiagonal
這樣螢屏的對角線就需要三秒鐘。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407392.html
標籤：
上一篇：提交表單時如何在jquery中僅設定一個選項選擇多選
下一篇：創建“搖頭”影片jQuery