Javascript 移动图像

Question

我有一个脚本，它使用 slider 在 x 轴上移动图像。我想做的是使用多个 slider 来影响同一个图像。我尝试过复制和重命名移动功能和 slider ，但它不起作用:

function move(){
    var x = document.getElementById("spin").value;
    var image = document.getElementById("test").style;
    image.marginLeft=x+"px";
}

<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500"  oninput="move()" style="width:100;"/>
       <div id="test"><h3>Image</h3></div>

想法？我还考虑过删除 slider 并使用输入文本字段来控制图像的 x 轴。

感谢您的投入。

Answer 1

你永远不会指定什么不起作用，但你提供的接缝很好，你只需要重命名它以防止两个函数之间的变量冲突。 (id、变量名等)

function movex1(){
    var x = document.getElementById("spinx").value;
    var image = document.getElementById("test").style;
    image.marginLeft=x+"px";
}

function movex2(){
    var x = document.getElementById("spiny").value;
    var image = document.getElementById("test").style;
    let currentMargin = parseInt(image.marginLeft.replace('px', ''));
    image.marginLeft= (currentMargin + parseInt(x)) + "px";
}

<input type="range" name="spinx" id="spinx" step="1" value="0" min="0" max="500"  oninput="movex1()" style="width:100;"/>
<input type="range" name="spiny" id="spiny" step="1" value="0" min="0" max="500"  oninput="movex2()" style="width:100;"/>

<div id="test"><h3>Image</h3></div>