我試圖讓這張圖片每次點擊移動 16 像素，但它沒有移動。我試過這個：
但這只會移動一次。所以我嘗試了一些我在網上找到的不同的東西。
這是我的代碼：
html:
document.getElementById('player').style.left = "-16px";
function left() {
var left = parseInt(player.style.left);
player.style.left = (left 16) "px";
}<img id="player" src="characters/prisoner-down.png"></img>
<img id="leftbtn" src="icons/left.png" onclick="left();"></img>編輯：如果知道有用的話，其他方向還有三個按鈕，我要移動的影像位于移動它的影像的另一個 DIV 中。在我的編輯器上，它說符號 ` 是無效的，所以我想避免它。
uj5u.com熱心網友回復：
您可以創建一個獲取平移方向和要增加的像素數的函式，然后回傳一個設定單擊元素的 style.transform 的函式，使用閉包可以更新要平移的像素數，試試這個：
function transform(side, n) {
let translatePixels = 0;
if (side == 'right') {
return function(e) {
translatePixels = n;
e.target.style.transform = `translate(${translatePixels}px)`;
}
}
if (side == 'left') {
return function(e) {
translatePixels -= n;
e.target.style.transform = `translate(${translatePixels}px)`;
}
}
}
const translateRight = transform('right', 16);
const translateLeft = transform('left', 16);<img onclick="translateRight(event);" src="https://images.rappi.com.ar/products/2311265-1622567743906.png?d=200x200&e=webp"></img>
<img onclick="translateLeft(event);" src="https://cdn.domestika.org/c_fill,dpr_auto,f_auto,h_256,pg_1,t_base_params,w_256/v1499705651/avatars/000/536/178/536178-original.jpg?1499705651" style="right: 0; position:absolute"></img>uj5u.com熱心網友回復：
position將財產分配給您img要移動的人。
像position: relative;等position: absolute;。
通過定位它們，您可以使用top、和屬性。leftrighttop
不要position: static;在那個img原因上使用上述屬性對靜態元素沒有影響。
document.getElementById('player').style.left = "-16px";
function left() {
let left = parseInt(player.style.left);
player.style.left = `${parseInt(left 16)}px`;
}img{
/*important for using left, right, top and bottom properties*/
position: relative;
}<img id="player" src="https://i.postimg.cc/44pXvSwD/pngwing-com.png"></img>
<img id="leftbtn" src="https://i.postimg.cc/FRkMDYvr/Pngtree-right-arrow-flat-multi-color-3777297.png" onclick="left();"></img>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496882.html
標籤：javascript html css 图片