從一個點擊的設置位置移動一個圖像，然後回到原來的位置？

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