📄 18-3.htm

📁 php 和 ajax 开发的一些资料
💻 HTM
字号:
<html>
<head>
<title>
拖动改变网页布局
</title>
<script language="javascript">
var xmlHttp;										//定义变量

var isdown = false 
var beginx,beginy 
function down() { 
isdown = true; 
} 

function move(obj) { 
if (isdown){ 
var endx = event.clientX; 
var endy = event.clientY; 
obj.style.left = parseInt( obj.style.left ) + endx-beginx; 
obj.style.top = parseInt( obj.style.top ) + endy-beginy; 

} 
beginx = event.clientX; 
beginy = event.clientY; 

} 

function up() { 
isdown = false; 
} 
function over(obj)
{
obj.style.zIndex=obj.style.zIndex+1;
}

function save()
{
 var obj1 = document.getElementById('div1');
 var obj2 = document.getElementById('div2');
 var l_1=obj1.style.left;
 var t_1=obj1.style.top;
 var l_2=obj2.style.left;
 var t_2=obj2.style.top;
 var url="18-3.php?l_1="+l_1+"&t_1="+t_1+"&l_2="+l_2+"&t_2="+t_2;
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");		//创建对象
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
 alert("成功保存层的位置，\n关闭本页再打开即可看到效果！")
}
function process()
{
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");		//创建对象
  xmlHttp.onreadystatechange=handle_f;					//定义句柄函数
  xmlHttp.open("GET","18-3.php",true);					//打开请求
  xmlHttp.send(null);								//向服务器发送请求
}
function handle_f()
{
  if(xmlHttp.readyState==4)							//如果传递完成
  {
    if(xmlHttp.status==200)							//如果服务器返回OK
    {
      var xmlDoc=xmlHttp.responseXML;
	  var top_1=xmlDoc.getElementsByTagName("top_1")[0];
	  top_1=top_1.childNodes[0].nodeValue;
	  //alert(top_1);
  	  var left_1=xmlDoc.getElementsByTagName("left_1")[0];
	  left_1=left_1.childNodes[0].nodeValue;
	  //alert(left_1);
	  var obj1 = document.getElementById('div1');
	  //obj1.style.top=top_1;
	  //alert(obj1.style.top);
	  obj1.style.top=parseInt(top_1,10);
	 obj1.style.left=parseInt(left_1,10);
	  var top_2=xmlDoc.getElementsByTagName("top_2")[0];
	  top_2=top_2.childNodes[0].nodeValue;
	  //alert(top_2);
	  var left_2=xmlDoc.getElementsByTagName("left_2")[0];
	  left_2=left_2.childNodes[0].nodeValue;
	  //alert(left_2);
	  var obj2 = document.getElementById('div2');
	  obj2.style.top= parseInt(top_2,10);
	  obj2.style.left=parseInt(left_2,10);

    }
    else											//如果服务器没有返回200
    {
      alert("执行过程中出现问题，服务器返回："+xmlHttp.statusText);
    }
  }
}
</script>
</head>
<body onload=process()>
<input type="button" value="保存" onclick="save()">
<div id="div1" style="POSITION: absolute;  LEFT: 0px; TOP: 0px;  WIDTH: 356px;HEIGHT: 284px; BACKGROUND-COLOR: #dddddd; cursor:move; z-index:0" 
onmousedown="down(this)" onmousemove="move(this)" onmouseup="up()" onmouseover="over(this)">
<font size="3" color="#cc0000">苏幕遮   怀旧(范仲淹)
<p style="line-height: 120%">
<hr>
碧云天，黄叶地，<br>
秋色连波，波上寒烟翠。<br>
山映斜阳天接水。<br>
芳草无情，更在斜阳外。<br>
<br>
黯乡魂，追旅思。<br>
夜夜除非，好梦留人睡。<br>
明月楼高休独倚。<br>
酒入愁肠，化作相思泪。<br>
</font>

</div> 
<div id="div2" style="POSITION: absolute;  LEFT: 0px; TOP: 0px;  WIDTH: 356px;HEIGHT: 284px; BACKGROUND-COLOR: #ddddff; cursor:hand; z-index:0" 
onmousedown="down(this)" onmousemove="move(this)" onmouseup="up()" onmouseover="over(this)">
<font size="3" color="#006600">一剪梅   李清照 
<p style="line-height: 120%">
<hr color="#0000cc">
红藕香残玉簟秋。<br>
轻解罗裳，独上兰舟。<br>
云中谁寄锦书来？<br>
雁字回时，月满西楼。<br>
<br>
花自飘零水自流，<br>
一种相思，两处闲愁。<br>
此情无计可消除，<br>
才下眉头，却上心头。<br>
</font>
</div> 
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -