如何在网页中制作一个飘动的图片

Question

我用javascript编写了一段代码,想让图片在网页中飘动,但这段代码运行时却无法达到预想的效果,请高手帮忙指出错误之处
<div id="img" style="position:absolute">
<img src="ee.gif" width=320 height=178></img> 
</div>
<script language="javascript">
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);}
start();
</script>

Answer 1

LZ粗心啦：大于等于是">=",不是"> ="<div   id="img"   style="position:absolute"> 
<img   src="ee.gif"   width=320   height=178> </img>   
</div> 
<script   language="javascript"> 
var   xPos   =   20; 
var   yPos   =   document.body.clientHeight; 
var   step   =   1; 
var   delay   =   30; 
var   height   =   0; 
var   Hoffset   =   0; 
var   Woffset   =   0; 
var   yon   =   0; 
var   xon   =   0; 
var   pause   =   true; 
var   interval; 
img.style.top   =   yPos; 
function   changePos()   { 
width   =   document.body.clientWidth; 
height   =   document.body.clientHeight; 
Hoffset   =   img.offsetHeight; 
Woffset   =   img.offsetWidth; 
img.style.left   =   xPos   +   document.body.scrollLeft; 
img.style.top   =   yPos   +   document.body.scrollTop; 
if   (yon)   { 
yPos   =   yPos   +   step; 
} 
else   { 
yPos   =   yPos   -   step; 
} 
if   (yPos   <   0)   { 
yon   =   1; 
yPos   =   0; 
} 
if   (yPos   >=   (height   -   Hoffset))   { 
yon   =   0; 
yPos   =   (height   -   Hoffset); 
} 
if   (xon)   { 
xPos   =   xPos   +   step; 
} 
else   { 
xPos   =   xPos   -   step; 
} 
if   (xPos   <   0)   { 
xon   =   1; 
xPos   =   0; 
} 
if   (xPos   >=   (width   -   Woffset))   { 
xon   =   0; 
xPos   =   (width   -   Woffset); 
} 
} 
function   start()   { 
img.visibility   =   "visible"; 
interval   =   setInterval('changePos()',   delay); } 
start(); 
</script> 

Answer 2

CSDN这个编辑器有问题啊，代码中间加控制颜色的东东没解析。再贴一次把。<div   id="img"   style="position:absolute"> 
<img   src="ee.gif"   width=320   height=178> </img>   
</div> 
<script   language="javascript"> 
var   xPos   =   20; 
var   yPos   =   document.body.clientHeight; 
var   step   =   1; 
var   delay   =   30; 
var   height   =   0; 
var   Hoffset   =   0; 
var   Woffset   =   0; 
var   yon   =   0; 
var   xon   =   0; 
var   pause   =   true; 
var   interval; 
img.style.top   =   yPos; 
function   changePos()   { 
width   =   document.body.clientWidth; 
height   =   document.body.clientHeight; 
Hoffset   =   img.offsetHeight; 
Woffset   =   img.offsetWidth; 
img.style.left   =   xPos   +   document.body.scrollLeft; 
img.style.top   =   yPos   +   document.body.scrollTop; 
if   (yon)   { 
yPos   =   yPos   +   step; 
} 
else   { 
yPos   =   yPos   -   step; 
} 
if   (yPos   <   0)   { 
yon   =   1; 
yPos   =   0; 
} 
if   (yPos   >=   (height   -   Hoffset))   { 
yon   =   0; 
yPos   =   (height   -   Hoffset); 
} 
if   (xon)   { 
xPos   =   xPos   +   step; 
} 
else   { 
xPos   =   xPos   -   step; 
} 
if   (xPos   <   0)   { 
xon   =   1; 
xPos   =   0; 
} 
if   (xPos   >=   (width   -   Woffset))   { 
xon   =   0; 
xPos   =   (width   -   Woffset); 
} 
} 
function   start()   { 
img.visibility   =   "visible"; 
interval   =   setInterval('changePos()',   delay); } 
start(); 
</script> 

Answer 3

回复liuhongxing1908901  我试了 但图象还是飘动不了

Answer 4

那就奇怪啦。那个代码是我测试过后贴上去的。飘得好好的。
你浏览器什么版本？报错了没有？
你的代码的提示字符串我刚贴下来的时候报错。没认真看就替换成notis1...4了，你仔细看看，是不是引号对有问题？
过细查查。代码肯定没问题。

Answer 5

我的浏览器是IE7.0,运行时效果是图象闪了一下就消失了.是否和我的操作系统无IIS有关呢?
我的操作系统是windows xp home edition版

Answer 6

我刚才查了,好象和IIS无关.但相同的代码在别的网站上能运行,但在我的本地机上运行不了呢?

Answer 7

你那是个HTML+js.保存成HTML用ＩＥ就跑起来了。ＩＥ７我手头没有。我在ＩＥ６和ＦＦ中都没问题。

Answer 8

现在的浏览器IE、FireFox、Opera等对DOM和javascirpt的解释有细微差别。
所谓的跨浏览器就是考虑解决这些问题。

Answer 9

我看了一下。如果只是这些代码，应该不存在兼容性的问题。
至于兼容性的解决，这个问题比较大，也比较复杂，大体来说，就是要针对不同浏览器的差异，对具体使用到的DOM操作和js调用采取不同的方法。