Question

<HTML><head>
<Script language="JavaScript">
<!--
function changePos() 
{
 width = document.body.clientWidth;   //the width of the current document
 height = document.body.clientHeight; //the height of the current document
 Hoffset = img.offsetHeight;
 Woffset = img.offsetWidth;
 img.style.left = xPos;  
 img.style.top = yPos;  

 if (yon) 
 {
  yPos = yPos + 5;
 } 
 else 
 { 
  yPos = yPos - 5;
 }
if(yPos < -Hoffset) 
 {
  yon = 1; yPos = -Hoffset;
 }
 if(yPos >= height) 
 {
  yon = 0; yPos = height;
 }
}
//-->
</Script>
</head>
<body>
<IMG id="img" style="POSITION: absolute" src="Images\Colored.jpg">
<SCRIPT language=JavaScript>
<!-- 
 var height = 0;
 var Hoffset = 0;
 var Woffset = 0;
 var yon = 0;  //false
 var xPos = 20;
 var yPos = document.body.clientHeight;
 var Timer1 = setInterval('changePos()',30);
//-->
</Script>
</BODY>
</HTML>

所以我的问题是，如何为这个动画添加一个新图像，并以与旧图像交替的方式制作它（例如：我的图像是彩色的，我想添加一个黑色＆amp;它的白色图像，所以它们交替在一起!!!

Answer 1

非常简单地开始，你可以简单地创建一个图像数组：

var images = new Array( "image1.jpg",
        "image2.jpg",
        "image3.jpg");

然后在html中声明一个img元素，如：

<img id="img1" src="image3.jpg" />

然后将其添加到您的函数中：

document.getElementById("img1").src = images[0] // or whatever image number you want.

看看这里：

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/131227/changing-images-in-html

Answer 2

也许这就是：

<html><head>
<script language="JavaScript"><!--
 var timer1,Hoffset = 0,Woffset = 0,
     xPos = 20,ypos,
     width = document.body.clientWidth,
     height=yPos=document.body.clientHeight,yon = 0;  //false

 window.onload=function() {
   Timer1 = setInterval(changePos,30);
 }

function changePos() {
  var img = document.getElementById('img');
  Hoffset = img.offsetHeight;
  Woffset = img.offsetWidth;

  yPos += (yon)?5:-5;
  if(yPos < -Hoffset)  {
   yon = 1; yPos = -Hoffset;
  }
  if(yPos >= height) {
   yon = 0; yPos = height;
  }
  img.src = img.src.indexOf("Colored.jpg"!=-1)?"Images\BW.jpg":"Images\Colored.jpg";
  img.style.left = xPos + "px";  
  img.style.top = yPos + "px";  
}
//-->
</script>
</head>
<body>
<img id="img" style="position: absolute" src="Images\Colored.jpg">
</body>
</html>

如何在此代码中添加新图像，因此我有2个交替图像？

2 个答案: