Question

我试图在我的网站上制作一个向右移动的图像。单击图像时，它应向左移动。就目前而言，任何想法都没有发生？如果可能的话，在纯Javascript中没有Jquery;）

此外，如果您再次单击该图像，它应该再次向右移动。每隔一段时间，图像应移动到另一侧。我想这对for-loop来说最好吗？

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

Answer 1

你应该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>

Answer 2

请先尝试一下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

这是您将其声明为null并且下一行是绑定click事件的错误。另外，为了分配click事件，您应该指定函数的名称。

movingblock.onclick = moveBlockLeft;

上面是基本的错误，有很多像上面那样。我觉得自学习对于基础知识要好得多试试自己。尝试以上它会工作，但请尝试自己

在已移动的图像上onClick事件

2 个答案: