可移动的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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值