Question

这不是硬件，而是来自我用来尝试学习Javascript的编码书的挑战。

挑战是让标题向左移动200像素，然后向下移动200像素，向左移动200像素，然后向上移动200像素。我尝试了多种方法，但是我遇到错误或跳转，或者我无法减少错误。我已经把我知道我需要做的基本轮廓放在这里（这只是对角线）。我感谢任何帮助！

谢谢，

丹尼尔

<!DOCTYPE html>
<html>
<head>
  <title>Interactive programming</title>
</head>
<body>
  <h1 id="heading">Hello world!</h1>
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  <script>
    var leftOffset = 0;
    var moveDown=0
    var moveHeading = function () {
      if(leftOffset<=200){
        $("#heading").offset({ left: leftOffset });
        leftOffset++;
      }
    };

    var moveHeadingDown= function (){
      if(moveDown<=200 ){
        $("#heading").offset({ top: moveDown });
        moveDown++;
       }
     };

    var moveHeadingLeft= function (){
      if (leftOffset===200){
        $("#heading").offset({ left: leftOffset });
        leftOffset--;
      }
    };
    var moveHeadingUp= function (){
      if (moveDown===200){
        $("#heading").offset({ top: moveDown });
        moveDown--;
      }
    }

    setInterval(moveHeading, 30);
    setInterval(moveHeadingDown, 30);
    setInterval(moveHeadingLeft, 30);
    setInterval(moveHeadingUp, 30);

  </script>
</body>
</html>

Answer 1

使用Jquery animate（）函数会更容易。

示例：

d = If(False, 0, CType(Nothing, Double?))

Answer 2

 var offleft=0;
 var offtop=0;

function position() {
   $('#heading').css('margin-top',offtop+'px');
   $('#heading').css('margin-left',offleft+'px');
}
$(function() {
  $({i:0}).animate({i:1},{
   duration: 300,
   easing: 'linear',
   step: function(now) {
      if(now<=0.25) {
         offleft = now*4*200;
      }
      else if(now<=0.5) {
         offtop = (now-0.25)*4*200;
      }
      else if(now<=0.75) {
         offleft = (now*-1+0.75)*4*200;
      }
      else {
         offtop = (now*-1+1)*4*200;
      }
      position();
   }
  });
});

这就是你想要的吗？我认为，每次200px时，它会向下移动元素，而不是向右，向上和向左移动。

如果您发现它有用并且确实有效，请与我联系：）

真诚的塞巴斯蒂安

使用jquery进行Header Move的麻烦

2 个答案: