一个漂浮广告（正向45°），只横着走的问题

liang800518 2010-12-17 12:41:26



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>随机漂浮的广告</title>

<script language="javascript">

  

  // 定义全局变量 gox 和 goy，表示横向移动方向和纵向移动方向

  var gox = 1;	// 默认为正向，即向左移

  var goy = 1;	// 默认为正向，即向下移

  

  function move() {



    var w = window.document.body.offsetWidth;	// 获得窗口宽度

	var h = window.document.body.offsetHeight;	// 获得窗口高度

	

	var speedx = 20;							// 横向的移动速度

	var speedy = Math.tan(Math.PI/4)*speedx;	// 纵向的移动速度：tan(PI/4) 表示正切 45°

	var x = document.getElementById("randomFloatingAdvertisements").style.left;	// 层的横坐标

	var y = document.getElementById("randomFloatingAdvertisements").style.top;	// 层的纵坐标

	

	// 如果横向的位置+图片的宽度>窗口的宽度，或者横向的位置小于 left 方向 0 的位置，则反向

	if(((parseInt(x) + 150) > w) || (parseInt(x) < 0)) 

	  gox = -gox;

	

	// 如果纵向的位置+图片的高度>窗口的高度，或者纵向的位置小于 top 方向 0 的位置，则反向

	if(((parseInt(y) + 100) > h) || (parseInt(y) < 0)) 

	  goy = -goy;



	

	// 根据移动方向，计算图片的横、纵坐标，gox 为 +1 或 -1，即坐标递增或递减

	document.getElementById("randomFloatingAdvertisements").style.left = parseInt(x) + (speedx * gox);

	document.getElementById("randomFloatingAdvertisements").style.top = parseInt(y) + (speedy * goy);

	

	// 设置定时器，每 800 毫秒调用 move() 函数，移动层图片

	window.setTimeout("move()",800);

	

  }

  

</script>

</head>



<body onLoad="move()">

  <h2>

    随机漂浮的广告

  </h2>

  <div id="randomFloatingAdvertisements" style="position:absolute; left:0px; top:0px; width:150px; height:100px; z-index:1">

    <a href="http://www.mycom.cn">

	  <img src="../../home_images/piaofu.jpg" width="150" height="100" border="0" />

	</a>

  </div>

</body>

</html>