实现图片浮动-优快云博客

本文通过一个简单的HTML页面示例介绍了如何使用JavaScript来控制HTML元素的位置移动，包括利用浏览器宽度和高度来确保元素始终在可视区域内随机移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>


<body >

<div id="moveLayer" style="position:absolute;
 left:24px; 
 top:256px;
 width:81px;
 height:54px;
 z-index:4;"/><a href="http://www.baidu.com" target="_blank"><img src="D:\\Program Files\\Tencent\\QQ\\85839593\\QQPhoto\\9284595_1.jpg" width="80" height="52" /></a></div>
<script language="javascript">

 var xpos=0;//x轴的坐标像素
 var ypos=0;//y轴的坐标像素
 var xon=0;//控制在x轴上的方向
 var yon=0;//控制y轴上的方向
 var step=0.3;//移动速度
function aa(){alert('aa');}
 function randomMove()
 {
  var width=document.documentElement.offsetWidth;//浏览器宽度
 // alert(width);
  var height=document.documentElement.offsetHeight;//浏览器高度
  //var width=document.documentElement.offsetWidth;//浏览器宽度 (这里用offsetWidth也行,但在dreamweaver中必须用documentElement,不能用body!因为dreamweaver所做//的是xhtml,而不是html)
  //var height=document.documentElement.offsetHeight;//浏览器高度
  var layerWidth=document.getElementById("moveLayer").offsetWidth;//层宽度
  var layerHeight=document.getElementById("moveLayer").offsetHeight;//层高度
  document.getElementById("moveLayer").style.pixelTop=ypos+document.documentElement.scrollTop;
  //随滚动条移动(同时也刷新层移动后的位置)(如果div对象中没有style样式的话,将不会移动.因为找不到document.getElementById("moveLayer").style.这种style样式!)
  document.getElementById("moveLayer").style.pixelLeft=xpos+document.documentElement.scrollLeft;//随滚动条移动

 //if(moveLayer.onmouseover){return false;}


  if(xon==0)//在x方向上移动(右移)
  {
   xpos+=step;
  }
  else//左移
  {
   xpos-=step;
  }
  if(xpos<0)
  {
   xon=0;
   xpos=0;
  }
  else if(xpos>=(width-layerWidth))//如果碰到浏览器的右端时,要左移
  {
   xon=1;
   xpos=(width-layerWidth);
  }



  if(yon==0)//y轴上向下移动
  {
   ypos+=step;
  }
  else//y轴向上移动
  {
   ypos-=step;
  }

  if(ypos<0)//当图片遇到浏览器上边框时要转动方向
  {
   yon=0;
   ypos=0;
  }
  else if(ypos>=(height-layerHeight))//遇到下边界时要上移
  {
   yon=1;
   ypos=(height-layerHeight);
  }



   moveLayerStop=setTimeout("randomMove()",30);
 }
 moveLayer.onload=randomMove();
</script>
</body>

</HTML>