首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

可腾挪的DIV

2012-11-04 
可移动的DIV!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//ENHTML HEADTITLE 吴丽

可移动的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" /></div> </BODY></HTML>

热点排行