从一个点击的设置位置移动一个图像，然后回到原来的位置？

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

是使用网站上的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 3

这应该做的工作。

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 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); 
     }