仿GOOGLE个性首页可移动图层效果
1
<html>
2<head>
3<title>DRAG the DIV</title>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5
<style>
6
*{font-size:12px}
7.dragTable{
8
font-size:12px;
9border-top:1px solid #3366cc;
10margin-bottom: 10px;
11width:100%;
12background-color:#FFFFFF;
13
}
14td{vertical-align:top;}
15.dragTR{
16cursor:move;
17color:#7787cc;
18background-color:#e5eef9;
19height:20px;
20padding-left:5px;
21font-weight:bold;
22}
23#parentTable{
24border-collapse:collapse;
25letter-spacing:25px;
26
}
27</style>
28<script defer>
29/****netxiu************E-MAIL:txidea.com****QQ:5734213***********/
30var Drag={dragged:false,
31 ao:null,
32 tdiv:null,
33dragStart:function(){
34Drag.ao=event.srcElement;
35if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
36 Drag.ao=Drag.ao.offsetParent;
37 Drag.ao.style.zIndex=100;
38}else
39 return;
40Drag.dragged=true;
41Drag.tdiv=document.createElement("div");
42Drag.tdiv.innerHTML=Drag.ao.outerHTML;
43Drag.ao.style.border="1px dashed red";
44Drag.tdiv.style.display="block";
45Drag.tdiv.style.position="absolute";
46Drag.tdiv.style.filter="alpha(opacity=70)";
47Drag.tdiv.style.cursor="move";
48Drag.tdiv.style.border="1px solid #000000";
49Drag.tdiv.style.width=Drag.ao.offsetWidth;
50Drag.tdiv.style.height=Drag.ao.offsetHeight;
51Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
52Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
53document.body.appendChild(Drag.tdiv);
54Drag.lastX=event.clientX;
55Drag.lastY=event.clientY;
56Drag.lastLeft=Drag.tdiv.style.left;
57Drag.lastTop=Drag.tdiv.style.top;
58},
59
60draging:function(){//重要:判断MOUSE的位置
61if(!Drag.dragged||Drag.ao==null)return;
62var tX=event.clientX;
63var tY=event.clientY;
64Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
65Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
66for(var i=0;i<parentTable.cells.length;i++){
67 var parentCell=Drag.getInfo(parentTable.cells[i]);
68 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
69 var subTables=parentTable.cells[i].getElementsByTagName("table");
70 if(subTables.length==0){
71 if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
72 parentTable.cells[i].appendChild(Drag.ao);
73 }
74 break;
75 }
76 for(var j=0;j<subTables.length;j++){
77 var subTable=Drag.getInfo(subTables[j]);
78 if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){
79 parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
80 break;
81 }else{
82 parentTable.cells[i].appendChild(Drag.ao);
83 }
84 }
85 }
86}
87}
88,
89dragEnd:function(){
90if(!Drag.dragged)return;
91Drag.dragged=false;
92Drag.mm=Drag.repos(150,15);
93Drag.ao.style.borderWidth="0px";
94Drag.ao.style.borderTop="1px solid #3366cc";
95Drag.tdiv.style.borderWidth="0px";
96Drag.ao.style.zIndex=1;
97},
98getInfo:function(o){//取得坐标
99var to=new Object();
100to.left=to.right=to.top=to.bottom=0;
101var twidth=o.offsetWidth;
102var theight=o.offsetHeight;
103while(o!=document.body){
104 to.left+=o.offsetLeft;
105 to.top+=o.offsetTop;
106 o=o.offsetParent;
107}
108 to.right=to.left+twidth;
109 to.bottom=to.top+theight;
110return to;
111},
112repos:function(aa,ab){
113var f=Drag.tdiv.filters.alpha.opacity;
114var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
115var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
116var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
117var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
118var kf=f/ab;
119return setInterval(function(){if(ab<1){
120 clearInterval(Drag.mm);
121 Drag.tdiv.removeNode(true);
122 Drag.ao=null;
123 return;
124 }
125 ab--;
126 tl-=kl;
127 tt-=kt;
128 f-=kf;
129 Drag.tdiv.style.left=parseInt(tl)+"px";
130 Drag.tdiv.style.top=parseInt(tt)+"px";
131 Drag.tdiv.filters.alpha.opacity=f;
132 }
133,aa/ab)
134},
135inint:function(){//初始化
136for(var i=0;i<parentTable.cells.length;i++){
137 var subTables=parentTable.cells[i].getElementsByTagName("table");
138 for(var j=0;j<subTables.length;j++){
139 if(subTables[j].className!="dragTable")break;
140 subTables[j].rows[0].className="dragTR";
141 subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
142 }
143}
144document.onmousemove=Drag.draging;
145document.onmouseup=Drag.dragEnd;
146}
147//end of Object Drag
148}
149Drag.inint();
150
151function _show(str){
152var w=window.open('','');
153var d=w.document;
154d.open();
155str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
156str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
157str=str.replace(/\r/g,"<br />\n");
158d.write(str);
159}
160</script>
161</head>
162<body>
163<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
164<tr >
165<td width="25%" valgin="top">
166 <table border=0 class="dragTable" cellspacing="0">
167 <tr>
168 <td><b>GMAIL</b></td>
169 </tr>
170 <tr>
171 <td>暂时无法显示GMAIL内容</td>
172 <tr>
173 </table><table border=0 class="dragTable" cellspacing="0">
174 <tr>
175 <td>新浪体育</td>
176 </tr>
177 <tr>
178 <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
179 <tr>
180 </table>
181 <table border=0 class="dragTable" cellspacing="0">
182 <tr>
183 <td>焦点</td>
184 </tr>
185 <tr>
186 <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选
187 解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 ?</td>
188 <tr>
189 </table>
190</td>
191<td width="25%">
192 <table border=0 class="dragTable" cellspacing="0">
193 <tr>
194 <td>中关村在线</td>
195 </tr>
196 <tr>
197 <td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
198 <tr>
199 </table></td>
200<td width="25%">
201 <table border=0 class="dragTable" cellspacing="0">
202 <tr>
203 <td>网易商业</td>
204 </tr>
205 <tr>
206 <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
207 <tr>
208 </table> <table border=0 class="dragTable" cellspacing="0">
209 <tr>
210 <td>黑可天下</td>
211 </tr>
212 <tr>
213 <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
214 <tr>
215 </table>
216</td>
217</tr>
218</table>
219<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
220</body>
221</html>
222
<html>2
<head>3
<title>DRAG the DIV</title>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">5
<style>
6
*{font-size:12px}
*7
.dragTable{8
font-size:12px;9
border-top:1px solid #3366cc;10
margin-bottom: 10px;11
width:100%;12
background-color:#FFFFFF;13
}14
td{vertical-align:top;}15
.dragTR{16
cursor:move;17
color:#7787cc;18
background-color:#e5eef9;19
height:20px;20
padding-left:5px;21
font-weight:bold;22
}23
#parentTable{24
border-collapse:collapse;25
letter-spacing:25px;26
}27
</style>28
<script defer>29
/****netxiu************E-MAIL:txidea.com****QQ:5734213***********/30
var Drag={dragged:false,31
ao:null,32
tdiv:null,33
dragStart:function(){34
Drag.ao=event.srcElement;35
if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){36
Drag.ao=Drag.ao.offsetParent;37
Drag.ao.style.zIndex=100;38
}else39
return;40
Drag.dragged=true;41
Drag.tdiv=document.createElement("div");42
Drag.tdiv.innerHTML=Drag.ao.outerHTML;43
Drag.ao.style.border="1px dashed red";44
Drag.tdiv.style.display="block";45
Drag.tdiv.style.position="absolute";46
Drag.tdiv.style.filter="alpha(opacity=70)";47
Drag.tdiv.style.cursor="move";48
Drag.tdiv.style.border="1px solid #000000";49
Drag.tdiv.style.width=Drag.ao.offsetWidth;50
Drag.tdiv.style.height=Drag.ao.offsetHeight;51
Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;52
Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;53
document.body.appendChild(Drag.tdiv);54
Drag.lastX=event.clientX;55
Drag.lastY=event.clientY;56
Drag.lastLeft=Drag.tdiv.style.left;57
Drag.lastTop=Drag.tdiv.style.top;58
},59
60
draging:function(){//重要:判断MOUSE的位置61
if(!Drag.dragged||Drag.ao==null)return;62
var tX=event.clientX;63
var tY=event.clientY;64
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;65
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;66
for(var i=0;i<parentTable.cells.length;i++){67
var parentCell=Drag.getInfo(parentTable.cells[i]);68
if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){69
var subTables=parentTable.cells[i].getElementsByTagName("table");70
if(subTables.length==0){71
if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){72
parentTable.cells[i].appendChild(Drag.ao);73
}74
break;75
}76
for(var j=0;j<subTables.length;j++){77
var subTable=Drag.getInfo(subTables[j]);78
if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){79
parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);80
break;81
}else{82
parentTable.cells[i].appendChild(Drag.ao);83
} 84
}85
}86
}87
}88
,89
dragEnd:function(){90
if(!Drag.dragged)return;91
Drag.dragged=false;92
Drag.mm=Drag.repos(150,15);93
Drag.ao.style.borderWidth="0px";94
Drag.ao.style.borderTop="1px solid #3366cc";95
Drag.tdiv.style.borderWidth="0px";96
Drag.ao.style.zIndex=1;97
},98
getInfo:function(o){//取得坐标99
var to=new Object();100
to.left=to.right=to.top=to.bottom=0;101
var twidth=o.offsetWidth;102
var theight=o.offsetHeight;103
while(o!=document.body){104
to.left+=o.offsetLeft;105
to.top+=o.offsetTop;106
o=o.offsetParent;107
}108
to.right=to.left+twidth;109
to.bottom=to.top+theight;110
return to;111
},112
repos:function(aa,ab){113
var f=Drag.tdiv.filters.alpha.opacity;114
var tl=parseInt(Drag.getInfo(Drag.tdiv).left);115
var tt=parseInt(Drag.getInfo(Drag.tdiv).top);116
var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;117
var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;118
var kf=f/ab;119
return setInterval(function(){if(ab<1){120
clearInterval(Drag.mm);121
Drag.tdiv.removeNode(true);122
Drag.ao=null;123
return;124
}125
ab--;126
tl-=kl;127
tt-=kt;128
f-=kf;129
Drag.tdiv.style.left=parseInt(tl)+"px";130
Drag.tdiv.style.top=parseInt(tt)+"px";131
Drag.tdiv.filters.alpha.opacity=f;132
}133
,aa/ab)134
},135
inint:function(){//初始化136
for(var i=0;i<parentTable.cells.length;i++){137
var subTables=parentTable.cells[i].getElementsByTagName("table");138
for(var j=0;j<subTables.length;j++){139
if(subTables[j].className!="dragTable")break;140
subTables[j].rows[0].className="dragTR";141
subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);142
}143
}144
document.onmousemove=Drag.draging;145
document.onmouseup=Drag.dragEnd;146
}147
//end of Object Drag148
}149
Drag.inint();150
151
function _show(str){152
var w=window.open('','');153
var d=w.document;154
d.open();155
str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");156
str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");157
str=str.replace(/\r/g,"<br />\n");158
d.write(str);159
}160
</script>161
</head>162
<body>163
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">164
<tr >165
<td width="25%" valgin="top">166
<table border=0 class="dragTable" cellspacing="0">167
<tr>168
<td><b>GMAIL</b></td>169
</tr>170
<tr>171
<td>暂时无法显示GMAIL内容</td>172
<tr>173
</table><table border=0 class="dragTable" cellspacing="0">174
<tr>175
<td>新浪体育</td>176
</tr>177
<tr>178
<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>179
<tr>180
</table>181
<table border=0 class="dragTable" cellspacing="0">182
<tr>183
<td>焦点</td>184
</tr>185
<tr>186
<td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选 187
解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 ?</td>188
<tr>189
</table>190
</td>191
<td width="25%">192
<table border=0 class="dragTable" cellspacing="0">193
<tr>194
<td>中关村在线</td>195
</tr>196
<tr>197
<td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>198
<tr>199
</table></td>200
<td width="25%">201
<table border=0 class="dragTable" cellspacing="0">202
<tr>203
<td>网易商业</td>204
</tr>205
<tr>206
<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>207
<tr>208
</table> <table border=0 class="dragTable" cellspacing="0">209
<tr>210
<td>黑可天下</td>211
</tr>212
<tr>213
<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>214
<tr>215
</table>216
</td>217
</tr>218
</table>219
<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />220
</body>221
</html>222
浙公网安备 33010602011771号