[转]经典的带阴影的可拖动的浮动层(JavaScript)
原文地址:http://www.blueidea.com/tech/web/2006/3330_3.asp
Code1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <html>
3 <head>
4 <title>MyPixbot</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6 <script language="JavaScript" type="text/JavaScript">
7 <!--
8 function MM_reloadPage(init) { //reloads the window if Nav4 resized
9 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
10 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
11 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
12 }
13 MM_reloadPage(true);
14
15 function MM_findObj(n, d) { //v4.01
16 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
17 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
18 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
19 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
20 if(!x && d.getElementById) x=d.getElementById(n); return x;
21 }
22
23 function MM_showHideLayers() { //v6.0
24 var i,p,v,obj,args=MM_showHideLayers.arguments;
25 for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
26 if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
27 obj.visibility=v; }
28 }
29
30 function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
31 //Copyright 1998 Macromedia, Inc. All rights reserved.
32 var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
33 var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
34 retVal = true; if(IE && event) event.returnValue = true;
35 if (MM_dragLayer.arguments.length > 1) {
36 curDrag = MM_findObj(objName); if (!curDrag) return false;
37 if (!document.allLayers) { document.allLayers = new Array();
38 with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
39 for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
40 with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
41 } else {
42 if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
43 for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
44 for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
45 } }
46 curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
47 curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
48 curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
49 curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
50 curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
51 curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
52 curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
53 if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
54 curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
55 if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
56 curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
57 curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
58 curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
59 document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
60 if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
61 } else {
62 var theEvent = ((NS)?objName.type:event.type);
63 if (theEvent == 'mousedown') {
64 var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
65 var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
66 var maxDragZ=null; document.MM_maxZ = 0;
67 for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
68 var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
69 if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
70 var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
71 if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
72 var parentL=0; var parentT=0;
73 if (NS6) { parentLayer = aLayer.parentNode;
74 while (parentLayer != null && parentLayer.style.position) {
75 parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
76 parentLayer = parentLayer.parentNode;
77 } } else if (IE) { parentLayer = aLayer.parentElement;
78 while (parentLayer != null && parentLayer.style.position) {
79 parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
80 parentLayer = parentLayer.parentElement; } }
81 var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
82 var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
83 if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
84 var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
85 var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
86 if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
87 || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
88 if (curDrag) {
89 document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
90 curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
91 curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
92 if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
93 MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
94 document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
95 if(curDrag.MM_toFront) {
96 eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
97 if (!curDrag.MM_dropBack) document.MM_maxZ++; }
98 retVal = false; if(!NS4&&!NS6) event.returnValue = false;
99 } } else if (theEvent == 'mousemove') {
100 if (document.MM_curDrag) with (document.MM_curDrag) {
101 var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
102 var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
103 newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
104 if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
105 if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
106 if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
107 if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
108 MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
109 if (NS4) {left = newLeft; top = newTop;}
110 else if (NS6){style.left = newLeft; style.top = newTop;}
111 else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
112 if (MM_dragJS) eval(MM_dragJS);
113 retVal = false; if(!NS) event.returnValue = false;
114 } } else if (theEvent == 'mouseup') {
115 document.onmousemove = null;
116 if (NS) document.releaseEvents(Event.MOUSEMOVE);
117 if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
118 if (document.MM_curDrag) with (document.MM_curDrag) {
119 if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
120 (Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
121 Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
122 if (NS4) {left = MM_targL; top = MM_targT;}
123 else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
124 else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
125 MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
126 if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
127 if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
128 retVal = false; if(!NS) event.returnValue = false; }
129 document.MM_curDrag = null;
130 }
131 if (NS) document.routeEvent(objName);
132 } return retVal;
133 }
134
135 function loadwin(obj){
136 with(MM_findObj(obj))with(style){
137 filters[0].apply();
138 display='';
139 filters[0].play();
140 }
141 }
142 function cs(captionBG,bodyBG,tableBG){
143 oldBody=document.body;
144 with(oldBody){
145 var newBody=cloneNode();
146 style.filter='blendtrans(duration=1)';
147 filters[0].apply();
148 with(document.styleSheets[0]){
149 with(rules[0].style){backgroundColor=captionBG;}
150 with(rules[1].style){backgroundColor=bodyBG;}
151 with(rules[2].style){backgroundColor=tableBG}
152 }
153 filters[0].play();
154 setTimeout(function(){
155 if(oldBody!=null){
156 oldBody.applyElement(newBody, "inside")
157 oldBody.swapNode(newBody);
158 oldBody.removeNode(true);
159 }
160 },1500);
161 }
162 }
163 //-->
164 </script>
165 <style type="text/css">
166 <!--
167 .caption {
168 font-size: 9px;
169 color: #FFFFFF;
170 background-color: #00CCFF;
171 padding-left: 5px;
172 cursor: default;
173 font-family: "Verdana", "Arial";
174 border: 1px inset;
175 }
176 body {
177 background-color: #f6f6f6;
178 border: 1px inset;
179 overflow: hidden;
180 }
181 table {
182 background-color: #eeeeee;
183 }
184 td {
185 font-family: "Verdana", "Arial";
186 font-size: 9px;
187 border: 0px;
188 }
189 .win {
190 filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90)
191 }
192 a {
193 text-decoration: none;
194 color: #003399;
195 }
196 a:hover {
197 color: #FF0000;
198 }
199 input {
200 font-family: "Verdana", "Arial";
201 font-size: 9px;
202 border-width: 1px;
203 }
204 .statusbar {
205 font-family: "Tahoma", "Verdana";
206 font-size: 9px;
207 color: #999999;
208 padding-left: 3px;
209 }
210 .button {
211 border: 1px outset;
212 text-align: center;
213 }
214 .navframe {
215 padding: 5px;
216 }
217 -->
218 </style>
219 </head>
220
221 <body>
222 <div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
223 <table width="180" border="1" cellpadding="0" cellspacing="0">
224 <tr>
225 <td class="caption">SeekAssist</td>
226 <td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
227 <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
228 </tr>
229 <tr id="assistwin">
230 <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
231 </tr>
232 </table>
233 <br>
234 </div>
235 <script>loadwin('assist')</script>
236 <div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
237 <table width="180" border="1" cellpadding="0" cellspacing="0">
238 <tr>
239 <td class="caption">SeekRank</td>
240 <td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
241 <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
242 </tr>
243 <tr id="rankwin">
244 <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
245 </tr>
246 </table>
247 <br>
248 </div>
249 <script>setTimeout("loadwin('rank')",500)</script>
250 <div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')">
251 <table width="180" border="1" cellpadding="0" cellspacing="0">
252 <tr>
253 <td class="caption">MyColor</td>
254 <td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
255 <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
256 </tr>
257 <tr id="mycolorwin">
258 <td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
259 <tr>
260 <td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
261 </tr>
262 <tr>
263 <td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
264 </tr>
265 <tr>
266 <td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
267 </tr>
268 <tr>
269 <td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
270 </tr>
271 <tr>
272 <td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
273 </tr>
274 <tr>
275 <td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
276 </tr>
277 </table></td>
278 </tr>
279 </table>
280 <br>
281 </div>
282 <script>setTimeout("loadwin('mycolor')",1000)</script>
283 <div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')">
284 <table width="570" border="1" cellpadding="0" cellspacing="0">
285 <tr>
286 <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
287 <tr>
288 <td class="caption">Results</td>
289 <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
290 <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
291 </tr>
292 </table></td>
293 </tr>
294 <tr>
295 <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100">
296 <a href="#" onclick="mainframe.location=url.value">Search</a></td>
297 </tr>
298 <tr id="resultswin">
299 <td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
300 </tr>
301 <tr>
302 <td height="14" class="statusbar">Ready!</td>
303 </tr>
304 </table>
305 <br>
306 </div>
307 <script>setTimeout("loadwin('results')",2000)</script>
308 </body>
309 </html>
浙公网安备 33010602011771号