javascript - 单击一次将图像从其设置位置移动，然后再返回到原始位置？

Question

使用按钮，我试图让图像在第一次点击时移动到页面的右上角，并在第二次点击时回到原来的位置。任何进一步的点击都会继续循环，因为我是 JS 新手，我不确定要使用什么 addEventListeners。提前致谢

HTML：

<div id="task2" class="task">
    <h2>Task 2</h2>

    <!-- image courtesy Google Chrome -->       
    <img src="media/chrome.png" alt="Chrome Browser" id="chrome_browser">

    <ol>
        <li>First click: Move the Chrome icon to the top, right corner of the page.</li>
        <li>Second click: Move the Chrome icon back to it's original spot.</li>
        <li>Further clicks: Continue the cycle.</li>
    </ol>
    <input type="button" value="Move" id="task2control">        
</div>

Answer 1

Using jQuery you can toggle the images class, and then use CSS to adjust the images position based on the class.

$('#task2control').click(function(){
    $('img').toggleClass('top');
});

Jsfiddle

Answer 2

这应该可以完成这项工作。

var button = document.getElementById("task2control");
var image = document.getElementById("chrome_browser");

var status = "original";

button.onclick = function () {
    switch (status) {
        case "topRightCorner":
            image.style.position = "";
            status = "original";
            break;
        case "original":
            image.style.position = "absolute";
            image.style.top = "0";
            image.style.right = "0";
            status = "topRightCorner";
            break;
    }
}

小提琴

Answer 3

我在这里所做的是每次单击按钮时取消绑定事件处理程序。

       $('#task2control').unbind('click').bind('click',setRight);


       function setLeft(){
            $('#chrome_browser').removeClass('topright');
            $('#chrome_browser').addClass('topleft');
            $('#task2control').unbind('click').bind('click',setRight);
        }

        function setRight(){
            $('#chrome_browser').removeClass('topleft');
            $('#chrome_browser').addClass('topright');
            $('#task2control').unbind('click').bind('click',setLeft);
        }

Answer 4

在您的网站上使用 jquery 是一种选择吗？然后你可以看看我想出了什么。

我为你的动态图像添加了一个类

<img src="media/chrome.png" alt="Chrome Browser" id="chrome_browser" class="original-pos">

并在简单的单击事件中检查其是否存在以切换 div 的位置。

$(document).ready(function(){
    var originalTop = $('#chrome_browser').css('top');
    var originalLeft = $('#chrome_browser').css('left');

    $('#task2control').on('click', function(){
        var image = $('#chrome_browser');

        if(image.hasClass('original-pos')){
            image.animate({
                top : "0px",
                left: "0px"
            }, function(){
                image.removeClass('original-pos');
            });
        } else {
             image.addClass('original-pos');
             image.animate({
                top: originalTop,
                left: originalLeft
            });
        }
    });
});

在jsfiddle上查看。