Javascript 图像已移动时的onClick事件_Javascript_Image_Events_Onclick

Javascript 图像已移动时的onClick事件

javascript image events

Javascript 图像已移动时的onClick事件,javascript,image,events,onclick,Javascript,Image,Events,Onclick,我试图在我的网站上制作一个向右移动的图像。单击图像时，图像应向左移动。现在，这种情况不会发生，有什么想法吗？如果可能，使用纯Javascript，不使用Jquery 此外，如果再次单击图像，它应该再次向右移动。每连续一次，图像都应移动到另一侧。我想这是最好的for循环 <script type"text/javascript"> window.onload = init; var winWidth = window.innerWidth - movingblock

我试图在我的网站上制作一个向右移动的图像。单击图像时，图像应向左移动。现在，这种情况不会发生，有什么想法吗？如果可能，使用纯Javascript，不使用Jquery

此外，如果再次单击图像，它应该再次向右移动。每连续一次，图像都应移动到另一侧。我想这是最好的for循环

<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>

你应该CSS3过渡，工作起来很有魅力。只需正确切换一个类

HTML:

在尝试之前，请先学习javascript的基础知识

window.onload=init； var winWidth=window.innerWidth； var movingblock=null； var intervalid=null； var isLeft=false；函数初始化{ console.log'Init'； movingblock=document.getElementById'movingblockobject'； movingblock.style.left='0px'； intervalid=setIntervalfunction{ 正确的； }, 2000; movingblock.onclick=函数{ 这是错误的； }; } 函数moveBlockisSetInterval{ 如果！isSetInterval isLeft=！isLeft；如果parseIntmovingblock.style.left我添加了一个JS提琴，如果您还有任何问题，请随时提问。不过，您确实需要jQuery才能让代码正常工作，包括jQuery是相当容易的。为了让我的图像向左移动，我基本上做了两个相同的函数left&right，我使用transition命令在这两个函数之间切换？不过，我真的很想知道如何在JS中做到这一点；如果你把发布的代码复制粘贴到一个html文件中，它会工作的。谢谢，这正是我搜索的内容！我在大学里只学了一周JS，这可能就是我有一些基本bug的原因。尽我所能，谢谢你的帮助：

<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>