如何让图像向下/向上滚动页面,而不停在页面边框?

时间:2012-10-03 23:19:15

标签: javascript html css animation

这是我的代码:

    <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 + 1;
 } 
 else 
 { 
  yPos = yPos - 1;
 }
 if(yPos < 0) 
 {
  yon = 1; yPos = 0;
 }
 if(yPos >= (height - Hoffset)) 
 {
  yon = 0; yPos = (height - Hoffset);
 }
}
//-->
</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>

我想让图像上下滚动,但不要停留在页面边框上,换句话说,我需要图像在页面下方和页面上方,无论何时到达任何位置!

1 个答案:

答案 0 :(得分:0)

更改

if(yPos < 0) 
 {
  yon = 1; yPos = 0;
 }
 if(yPos >= (height - Hoffset)) 
 {
  yon = 0; yPos = (height - Hoffset);
 }

if(yPos < -Hoffset) 
 {
  yon = 1; yPos = -Hoffset;
 }
 if(yPos >= height) 
 {
  yon = 0; yPos = height;
 }