onClick事件在圖像上移動時已經移動了

我試圖在我的網站上移動圖像。當你點擊圖片時，它應該移動到左邊。現在，這不會發生，有什麼想法？如果可能的話，在純Javascript和沒有Jquery;）onClick事件在圖像上移動時已經移動了

此外，如果您再次單擊該圖像，它應該再次移動到右側。每連續一次，圖像應該移動到另一邊。我想這對於循環來說是最好的？

<script type"text/javascript"> 

    window.onload = init; 

    var winWidth = window.innerWidth - movingblockobject.scrollWidth; //get width of window 
    var movingblock = null  //object 

    movingblock.onclick = moveBlockLeft(); 

    function init() { 
     movingblock = document.getElementById('movingblockobject');  //get object 
     movingblock.style.left = '0px';  //initial position 
     moveBlockRight();  //start animiation 
    } 

    function moveBlockRight() { 
     if (parseInt(movingblock.style.left) < winWidth) {  // stop function if element touches max window width 
      movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px';  //move right by 10px 
      setTimeout(moveBlockRight,20);  //call moveBlockRight in 20 msec 
     } else { 
      return; 
     } 
    } 

    function moveBlockLeft() { 
     movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px' 
    } 

</script>

來源

2014-09-24 Loek

請先去通過JavaScript的基礎嘗試的東西了。

window.onload = init; 
 
    var winWidth = window.innerWidth; 
 
    var movingblock = null; 
 
    var intervalid = null; 
 
    var isLeft = false; 
 

 
    function init() { 
 
     console.log('Init'); 
 
     movingblock = document.getElementById('movingblockobject'); 
 
     movingblock.style.left = '0px'; 
 
     intervalid = setInterval(function() { 
 
     moveBlock(true); 
 
     }, 2000); 
 
     movingblock.onclick = function() { 
 
     moveBlock(false); 
 
     }; 
 
    } 
 

 
    function moveBlock(isSetInterval) { 
 
     if (!isSetInterval) 
 
     isLeft = !isLeft; 
 
     if (parseInt(movingblock.style.left) < winWidth) { 
 
     if (isLeft) 
 
      movingblock.style.left = parseInt(movingblock.style.left) - 10 + 'px'; 
 
     else 
 
      movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px'; 
 
     } else { 
 
     movingblock.style.left = '0px'; 
 
     } 
 
    } 
 

 
    function moveBlockLeft() { 
 
     clearInterval(intervalid); 
 
     movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px'; 
 
     intervalid = setInterval(moveBlockRight, 20); 
 
    }

<div id="movingblockobject" style="width:50px;height:50px;border:solid;position: absolute;">

var movingblock = null

這是你delclared它作爲空，下一行要綁定單擊event.Also分配click事件應先分配的名稱錯誤功能。上述

movingblock.onclick = moveBlockLeft;

是基本的錯誤也有很多像above.I自我感覺學習是更好的基礎嘗試自己。嘗試以上它會工作，但請嘗試自己

來源

2014-09-24 13:36:13 Krishjs

非常感謝，我正在尋找的東西！我現在在大學只有1周的JS，這可能就是爲什麼我有一些基本的錯誤。盡我所能，謝謝你的幫助:) – Loek 2014-09-24 14:02:43

你應該CSS3過渡，就像一個魅力。只需撥動一類「右」

HTML：

<html> 
<head> 
    <style> 
    #movingblockobject{ 
     width: 40px; 
     padding: 10px; 

     position: fixed; 
     height:10px; 


     left:0px; 
     -webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */ 
     transition: left 2s; 
    } 
    #movingblockobject.right{ 
     left:200px; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $('#movingblockobject').on('click', function (e) { 
      $('#movingblockobject').toggleClass("right"); 
     }); 
    }); 

    </script> 
</head> 
<body> 
    <div id="movingblockobject" class="demo">add image here</div> 
</body> 
</html>

來源

2014-09-24 12:10:15

它的工作原理，但我真的需要JS代碼：p 雖然謝謝！ – Loek 2014-09-24 12:14:34

我已經添加了一個JS小提琴，如果您有任何更多的問題隨時問。你確實需要jQuery才能使用該代碼，包括jQuery相當容易 – 2014-09-24 12:24:45

啊好吧。所以爲了讓我的圖像向左移動，我基本上創建了兩個相同的函數（左和右），並使用轉換命令在兩者之間切換？不過，我真的想知道如何在JS中做到這一點;） – Loek 2014-09-24 12:30:09

onClick事件在圖像上移動時已經移動了

回答

相關問題