-1 
<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>

だから私の質問は、このアニメーションに新しい画像を追加し、古い画像と交互になるようにする方法です (例: 私が持っている画像は色付きで、それに白黒の画像を追加したいのですが、だから彼らは一緒に交互に!!!

4

2 に答える 2

0

非常に簡単に始めるには、単純に画像の配列を作成できます。

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/ching-images-in-html

于 2012-10-04T09:09:19.987 に答える
0

おそらくこれ：

<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>
于 2012-10-04T09:14:10.157 に答える