现在很多网站都加入了
AJAX技术。。
下面为大家发一个怎么制作仿Google 拖动的个性化页面
首先:新建*.htm
代码如下
复制代码到*.txt中，修改后缀为*.htm)
复制内容到剪贴板
代码:
<html>
<head>
<title>DRAG the DIV</title>
<style>
.dragTable{
font-size:12px;
border:1px solid #000;
margin-bottom: 10px;
width:100%;
background-color:#ccc;
height:30px;
}
.dragTR{
cursor:move;
color:#fff;
background:red;
height:20px;
}
td{vertical-align:top;
}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script src="*.js" language="javascript" type="text/javascript"></script>
<script defer>
var draged=false;
tdiv=null;
function dragStart(){
ao=event.srcElement;
if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
else return;
draged=true;
tdiv=document.createElement("div");
tdiv.innerHTML=ao.outerHTML;
tdiv.style.display="block";
tdiv.style.position="absolute";
tdiv.style.filter="alpha(opacity=60)";
tdiv.style.cursor="move";
tdiv.style.width=ao.offsetWidth;
tdiv.style.height=ao.offsetHeight;
tdiv.style.top=getInfo(ao).top;
tdiv.style.left=getInfo(ao).left;
document.body.appendChild(tdiv);
lastX=event.clientX;
lastY=event.clientY;
lastLeft=tdiv.style.left;
lastTop=tdiv.style.top;
try{
ao.dragDrop();
}catch(e){}
}
function draging(){//重要:判断MOUSE的位置
if(!draged)return;
var tX=event.clientX;
var tY=event.clientY;
tdiv.style.left=parseInt(lastLeft)+tX-lastX;
tdiv.style.top=parseInt(lastTop)+tY-lastY;
for(var i=0;i<parentTable.cells.length;i++){
var parentCell=getInfo(parentTable.cells[i]);
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
var subTables=parentTable.cells[i].getElementsByTagName("table");
if(subTables.length==0){
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
parentTable.cells[i].appendChild(ao);
}
break;
}
for(var j=0;j<subTables.length;j++){
var subTable=getInfo(subTables[j]);
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
parentTable.cells[i].insertBefore(ao,subTables[j]);
break;
}else{
parentTable.cells[i].appendChild(ao);
}
}
}
}
}
function dragEnd(){
if(!draged)return;
draged=false;
mm=ff(150,15);
}
function getInfo(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
return to;
}
function ff(aa,ab){//从GOOGLE网站来,用于恢复位置
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(ao).left)/ab;
var af=(ad-getInfo(ao).top)/ab;
return setInterval(function(){if(ab<1){
clearInterval(mm);
tdiv.removeNode(true);
ao=null;
return
}
ab--;
ac-=ae;
ad-=af;
tdiv.style.left=parseInt(ac)+"px";
tdiv.style.top=parseInt(ad)+"px"
}
,aa/ab)
}
function inint(){//初始化
for(var i=0;i<parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName("table");
for(var j=0;j<subTables.length;j++){
if(subTables[j].className!="dragTable")break;
subTables[j].rows[0].className="dragTR";
subTables[j].rows[0].attachEvent("onmousedown",dragStart);
subTables[j].attachEvent("ondrag",draging);
subTables[j].attachEvent("ondragend",dragEnd);
}
}
}
inint();
</script>
<script language="javascript" >
function init()
{
readrss(#/rss','div10');
readrss(#/rss','div2');
readrss(#/rss','div5');
readrss(#l/rss','div3');
readrss(#/rss','div4');
setTimeout("init()","1000");
}
</script>
</head>
<body onLoad="init()">
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
<td width="25%" valgin="top"><table border=0 class="dragTable" cellspacing="0">
<tr>
<td bgcolor="#000099" class="ee">111</td>
</tr>
<tr>
<td height="200"> </td>
</tr>
<tr>
<td id="div3"></td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td bgcolor="#FFFF00">111</td>
</tr>
<tr>
<td height="200"> </td>
</tr>
<tr>
<td id="div3"></td>
<tr>
</table>
</td>
<td width="25%"><table border=0 class="dragTable" cellspacing="0">
<tr>
<td bgcolor="#00FF33">111</td>
</tr>
<tr>
<td height="250"> </td>
</tr>
<tr>
<td id="div3"></td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td bgcolor="#00FFFF">111</td>
</tr>
<tr>
<td height="150"> </td>
</tr>
<tr>
<td id="div3"></td>
<tr>
</table></td>
<td width="25%"><table border=0 class="dragTable" cellspacing="0">
<tr>
<td bgcolor="#FF66CC">111</td>
</tr>
<tr>
<td height="200"> </td>
</tr>
<tr>
<td id="div3"></td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td bgcolor="#000000">111</td>
</tr>
<tr>
<td height="200"> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>第二步:新建*.js
代码如下
复制代码到*.txt中,修改后缀为*.js)
复制内容到剪贴板
代码:
// JavaScript Document
function echo(obj1,html)
{
$(obj1).innerHTML=html;
}
function $(id)
{
return document.getElementById(id);
}
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function parseResults(obj1) {
var results = xmlHttp.responseXML;
var item = null;
var title;
var items = results.getElementsByTagName("item");
for(var i = 0; i < items.length; i++) {
item = items[i];
title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
//clearPreviousResults();
link2=item.getElementsByTagName("link")[0].firstChild.nodeValue;
title=str(title);
addListRow(title,link2,obj1);
}
}
function readrss(url,obj)
{
createXMLHttpRequest()
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
//xmlHttp.abort();
function handleStateChange()
{
if(xmlHttp.readyState==2)
{
echo(obj,"正在提交数据，请稍等......");
}
else if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//echo(obj,"正在提交数据，请稍等......");
clearPreviousResults(obj);
parseResults(obj);
}
}
}
}
function addListRow(test,link1,obj2)
{
//clearPreviousResults(obj2);
$(obj2).innerHTML+='<a href="'+link1+'" target="_blank" >'+test+'</a><br>';
}
function str(stri)
{
var strb;
if(stri.length>30)
{
strb=stri.substring(0,30)+'..';
}
else
{
strb=stri;
}
return strb;
}
function clearPreviousResults(obj3) {
while($(obj3).childNodes.length > 0) {
$(obj3).removeChild($(obj3).childNodes[0]);
}
}提示: <script src="*.js" language="javascript" type="text/javascript"></script>
这个是调用的第二步中的JS文件,所以在保存JS文件名的时候,请注意保持文件名一致.
效果演示地址: http://ls1986.91.tc/java/test.html
