当前位置: 代码迷 >> Web前端 >> 可腾挪的DIV
  详细解决方案

可腾挪的DIV

热度:93   发布时间:2012-11-04 10:42:41.0
可移动的DIV
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 吴丽丽I Love you! </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <script language="javascript">
	var timeObj;
	var x = 5;
	var y = 5;
	
	window.onload = function moveDiv(){
		var bodyWidth = document.body.clientWidth;
		var bodyHeight = document.body.clientHeight;
		var imgDiv = document.getElementById("imgDiv");
		var tops = parseInt(imgDiv.style.top);
		var lefts = parseInt(imgDiv.style.left);
		imgDiv.style.top = tops+x;
		imgDiv.style.left = lefts+y;

		if(tops>bodyHeight-140){
			x = -5;
		}
		if(tops<0){
			x = 5;
		}
		if(lefts>bodyWidth-130){
			y = -5;
		}
		if(lefts<0){
			y = 5;
		}


		timeObj = window.setTimeout("moveDiv()","10");
		
	}
 </script>

 <BODY>
	<h1>可移动DIV!</h1><br>
	<div id="imgDiv" style="position:absolute;top=210;left=210;background='#FFEFAQ';border=1px solid #6633FF;width=130px;height=140px">
		<img src="wll.jpg" width="130" height="140" alt="我是图片" />
	</div>
 </BODY>
</HTML>

  相关解决方案