設為首頁收藏本站
切換到寬版

 找回密碼
 註冊
NetYea 響應式網頁
RWD 新竹網頁設計		 MyPresent.net
聯盟行銷賺分紅 		綠能購物網 手工藝品、客製化商品 管乾淨 專業 清洗水管
搜索
TShopping»討論區 › 軟體設計開發 › 網頁設計 › 帶陰影的可拖動的浮動層
返回列表 發新帖
查看: 2014|回復: 2

[教學] 帶陰影的可拖動的浮動層

[複製鏈接]
woff
發表於 2008-9-23 20:23:53 | 顯示全部樓層 |閱讀模式
 
Push to Facebook
先提供語法,有空再做演

  1. <html>
  2. <head>
  3. <title>MyPixbot</title>

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

使用道具 舉報

bobobilly
發表於 2013-11-13 01:09:28 | 顯示全部樓層
這個帖不错！！！！！  
版主招募中
回復 愛心 反對

使用道具 舉報

返回列表 發新帖
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

Archiver|手機版|小黑屋|TShopping

GMT+8, 2025-11-4 11:17 , Processed in 0.022437 second(s), 18 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回復 返回頂部 返回列表