使用JS在页面周围移动div
[英]Using JS to move a div around the page
问题描述
All, 
所有，
A total newbie here but could someone please review this code and let me know where I am going wrong? 这里有一个新手，但有人可以查看这段代码，让我知道我哪里出错了？
What effect I am trying to achieve: I have about 9 divs on the webpage, consisting of images and text, the text comes into focus when the user hovers over the image inside the div. 我试图实现什么效果：我在网页上有大约9个div，包括图像和文本，当用户将鼠标悬停在div内的图像上时，文本会聚焦。 I want these divs to 'appear' to be floating around the page. 我希望这些div“出现”在页面上浮动。
So what I did: I absolutely positioned the divs using CSS on the webpage. 所以我做了什么：我绝对在网页上使用CSS定位div。 Now I am using JS to move the divs from their position to set positions on the page (will do this for each div) and try to give the effect of random movement to the divs. 现在我使用JS将div从他们的位置移动到页面上的设置位置（将为每个div执行此操作）并尝试将随机移动的效果赋予div。 Here is the code: 这是代码：
<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>
Could someone please explain where I am going wrong? 有人可以解释我哪里出错吗？
Cheers, 干杯，
3 个解决方案
解决方案1
1 2011-03-09 22:16:12
The problem is here: 问题出在这里：
document.getElementById("cr001").style.left
This actually returns the css value, which is a string for example '100px' or '10%' etc. Yet, later on your code, you use this value as if it was an integer. 这实际上返回了css值，这是一个字符串，例如'100px'或'10％'等。但是，稍后在您的代码中，您使用此值就好像它是一个整数。
解决方案2
1 已采纳 2011-03-09 22:35:46
Based on the refined post, I now see that you are trying to access body content in the head with var x = document.getElementById("cr001").style.left; 基于精炼的帖子，我现在看到你正在尝试使用var x = document.getElementById("cr001").style.left;来访问头部的主体内容var x = document.getElementById("cr001").style.left;
This won't work because when the head is loaded, the body is not ready. 这不起作用，因为当头部装载时，身体还没准备好。 You should make an init() function that looks like: 你应该创建一个如下所示的init（）函数：
function init(){
window.x = document.getElementById("cr001").style.left;
window.y = document.getElementById("cr001").style.top;
moveImage();
}
and then attach that to the body onload. 然后将它附加到身体上。
EDIT: ok, here is some modified code that does what you want. 编辑：好的，这是一些修改后的代码，可以做你想要的。 You can stick this in a file named index.html and launch it in Firefox. 您可以将其粘贴在名为index.html的文件中，然后在Firefox中启动它。 I broke it down for you: 我为你打破了它：
<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>
解决方案3
0 2011-03-09 22:19:25
You have an unclosed div. 你有一个未公开的div。 You open <div id="container"> and <div id="cr001" class="twinkles"> but only close one of them 你打开<div id="container">和<div id="cr001" class="twinkles">但只关闭其中一个
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.