使用JS移动一个div页面

这里一共有新手，但可能有人请检查此代码，让我知道我错了？

我想要什么样的影响来实现的：我对网页约9申报单，包括图像和文本，该文本进入焦点，当用户将鼠标悬停在div内的图像。我希望这些div“出现”在页面上浮动。

所以我做了什么：我绝对定位使用网页上的CSS的div。现在我使用JS将div从他们的位置移动到页面上设置位置（将为每个div执行此操作），并尝试将随机移动的效果赋予div。下面是代码：

 <script language="javascript"> 
      var x = document.getElementById("cr001").style.left; 
      var y = document.getElementById("cr001").style.top; 
      var d_x = 75; 
      var d_y = 100; 
      var interval = 2;     //move by only 2px... 

      function moveImage() { 
       if(x < d_x) x = x + interval; 
       if(y < d_y) y = y + interval - 1;     //move y by only 1px 

       document.getElementById("cr001").style.left = x+'px'; 
       document.getElementById("cr001").style.top = y+'px'; 

       if ((x + interval < d_x) && (y + interval < d_y)) { 
        window.setTimeout('moveImage()',100); 
       } 
      } 
    </script> 
</head> 

<body onload="moveImage()"> 
    <div id="blackhole"><img src="img/bimg.png" alt="blackhole" /></div> 
    <div id="container"> 

      <div id="cr001" class="twinkles"> 
       <a href="#"> 
       <img src="img/cr.png" alt="Co is about your freedom" /> 
       <span>Co is about your freedom</span></a> 

    </div> 

</body>

可能有人请解释一下我要去的地方错了吗？

干杯，

来源

2011-03-09 Kayote

什么部分是不工作？ – glomad 2011-03-09 22:14:16

你能更好地解释发生了什么吗？这种方式不起作用？更好的是，提供一个链接，我们可以看到它的行动... – jordancpaul 2011-03-09 22:16:57

也许如果你发布了一个链接，我们可以检查你的工作，看看什么坏了，在哪里，会有所帮助。 – sarcastyx 2011-03-09 22:18:23

之一，我现在看到您试图访问的主体内容的脑袋var x = document.getElementById("cr001").style.left;

这不会起作用，因为当头部被加载，身体没有准备好。你应该做一个init（）函数，看起来像：

function init(){ 
    window.x = document.getElementById("cr001").style.left; 
    window.y = document.getElementById("cr001").style.top; 
    moveImage(); 
}

然后将其附加到正文onload。

编辑：好吧，这里是一些修改后的代码，你想要做什么。您可以将其粘贴到名为index.html的文件中，并在Firefox中启动它。我把它弄坏了下来你：

<html> 
<head> 
    <script language="javascript"> 
     var d_x = 75; 
     var d_y = 100; 
     var interval = 2;     

     //init is used for getting things up and running once the page is loaded 
     function init(){ 
      //optimization: only get the element once 
      var el = document.getElementById("cr001") 
      x = parseInt(el.style.left); 
      if(isNaN(x)){ 
       //parseInt("") == NaN 
       x = 0; 
      } 
      y = parseInt(el.style.top); 
      if(isNaN(y)){ 
       //ditto 
       y = 0; 
      } 
      //call the nuts of this script 
      moveImage(); 
     } 

     //this is mostly unchanged 
     function moveImage() { 
      if(x < d_x){ 
       x = x + interval; 
      }else{ 
       //lets keep looping just for fun! 
       x = 0; 
      } 
      if(y < d_y){ 
       y = y + interval - 1;     //move y by only 1px 
      }else{ 
       y = 0; 
      } 

      //optimization: only get the element once 
      var el = document.getElementById("cr001") 
      el.style.left = x + 'px'; //dont forget to add 'px' back in 
      el.style.top = y + 'px'; 

      //loop, don't use strings in setTimeout since this is basically eval...eval is evil 
      setTimeout(moveImage, 100); 

     } 
    </script> 
</head> 
<body onload="init()"> 
    <div id="container"> 
      <!-- IMPORTANT: POSITION IS ABSOLUTE --> 
      <div id="cr001" style="position:absolute; width:10px; height:10px; background-color:black"></div> 
    </div> 
</body>

来源

2011-03-09 22:35:46 jordancpaul

你已经失去了我jordancpaul。你能通过这个代码来说说我吗？下面是我刚刚阅读你的评论后试图：我把脚本移动到HTML的底部（inbetween html＆body close tags），错误消失了（hurray！），但动画仍然没有播放。 ..？ – Kayote 2011-03-09 22:49:43

那么，这也会起作用，但会导致代码变得脆弱（取决于何时加载DOM）。一般来说，您应该尽量避免在加载页面之前使用JavaScript访问页面内容。 getElementById（）函数要求该元素实际存在，这就是该脚本头部失败的原因。我会在此答案中添加更多信息 – jordancpaul 2011-03-09 23:12:07

我已编辑 – jordancpaul 2011-03-09 23:33:56

的问题是在这里：

document.getElementById("cr001").style.left

这实际上返回CSS值，这是例如“100像素”或'10％”等字符串然而，后来的代码，您可以像使用整数一样使用此值。

来源

2011-03-09 22:16:12 linepogl

使用'parseInt函数（的document.getElementById（ “CR001”）style.left）;' – jcubic 2011-03-09 22:22:44

感谢linepogl和jcubic。这绝对有道理。然而，我仍然得到像以前一样的错误： document.getElementById（“cr001”）为空，其他的我做错了什么？ – Kayote 2011-03-09 22:33:31

@Kayote，读取函数moveImage（）之外的代码将被评估，这太快了：div'cr001'还没有被读取。 – linepogl 2011-03-09 22:38:38

你有一个未关闭的div。你打开<div id="container">和<div id="cr001" class="twinkles">但基于成品后只有接近他们

来源

2011-03-09 22:19:25 jordancpaul

有相当多的html代码和发布删除，我删除（错误地）的div关闭以及。感谢指针。 :) – Kayote 2011-03-09 22:30:59

使用JS移动一个div页面

回答

相关问题