<!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>
可移动的DIV
最新推荐文章于 2019-04-18 16:34:18 发布