javascript - 单击按钮时设置新对象位置？

Question

我试图弄清楚当有人单击按钮时更改对象在屏幕上的位置。例如，当单击按钮时，图像 1 应移动到 {'x' : '300' , 'y' : '200'}。

有什么建议吗？谢谢!

Answer 1

假设您的 HTML 布局中有以下内容:

<button id="button1">Click</button>
<img src="..." id="image1" />

您可以在脚本文件中执行类似的操作(纯 JavaScript):

var button1 = document.getElementById("button1");
var image1 = document.getElementById("image1");

button1.click = function()
{
    image1.style.position = "absolute";
    image1.style.top = "300px";
    image1.style.left = "200px";
};

或者使用 jQuery/Zepto.js:

$(function()
{
    $("#button1").on("click", function()
    {
        $("#image1").css({position: "absolute", top: "300px", left: "200px"});
    });
});