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

使用jQuery，您可以切换图像类，然后使用CSS根据类调整图像位置。

$('#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;
    }
}

FIDDLE

Answer 3

在您的网站上使用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上查看。

Answer 4

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

       $('#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);
        }

一次单击从设定位置移动图像，然后返回到下一个原始位置？

4 个答案: