`
pxchen
  • 浏览: 90897 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

子界面浮现，拖动

    博客分类：
  • js
IE 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>浮现在网页上的带阴影可拖动的层-JS特效学院|JSWEB8.CN</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
   if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
   var i,p,v,obj,args=MM_showHideLayers.arguments;
   for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
     obj.visibility=v; }
}
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
   //Copyright 1998 Macromedia, Inc. All rights reserved.
   var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
   var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
   retVal = true; if(IE && event) event.returnValue = true;
   if (MM_dragLayer.arguments.length > 1) {
    curDrag = MM_findObj(objName); if (!curDrag) return false;
     if (!document.allLayers) { document.allLayers = new Array();
       with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
        for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
           with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
       } else {
         if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
          for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
         for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
     } }
     curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
     curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
     curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
     curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
    curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
     curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
     curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
     if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
    curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
     if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
    curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
     curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
     curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
     document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
     if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
   } else {
     var theEvent = ((NS)?objName.type:event.type);
     if (theEvent == 'mousedown') {
       var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
       var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
       var maxDragZ=null; document.MM_maxZ = 0;
      for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
         var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
        if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
         var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
         if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
           var parentL=0; var parentT=0;
           if (NS6) { parentLayer = aLayer.parentNode;
             while (parentLayer != null && parentLayer.style.position) {            
               parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
               parentLayer = parentLayer.parentNode;
          } } else if (IE) { parentLayer = aLayer.parentElement;      
             while (parentLayer != null && parentLayer.style.position) {
               parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
               parentLayer = parentLayer.parentElement; } }
           var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
           var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
           if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
           var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS4)?clip.widthffsetWidth);
           var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
           if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
               || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
       if (curDrag) {
          document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
           curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
         curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
           if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
         MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
           document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
          if(curDrag.MM_toFront) {
             eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
          if (!curDrag.MM_dropBack) document.MM_maxZ++; }
           retVal = false; if(!NS4&&!NS6) event.returnValue = false;
      } } else if (theEvent == 'mousemove') {
         if (document.MM_curDrag) with (document.MM_curDrag) {
          var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
          var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
          newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
          if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
         if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
        if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
         if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
         MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
         if (NS4) {left = newLeft; top = newTop;}
         else if (NS6){style.left = newLeft; style.top = newTop;}
          else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
         if (MM_dragJS) eval(MM_dragJS);
          retVal = false; if(!NS) event.returnValue = false;
      } } else if (theEvent == 'mouseup') {
      document.onmousemove = null;
       if (NS) document.releaseEvents(Event.MOUSEMOVE);
       if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
        if (document.MM_curDrag) with (document.MM_curDrag) {
        if (typeof MM_targL =='number' && typeof MM_targT == 'number' &
              (Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
               Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
          if (NS4) {left = MM_targL; top = MM_targT;}
            else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
            else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
           MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
         if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
          if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
         retVal = false; if(!NS) event.returnValue = false; }
        document.MM_curDrag = null;
      }
      if (NS) document.routeEvent(objName);
    } return retVal;
  }
  function loadwin(obj){
      with(MM_findObj(obj))with(style){
         filters[0].apply();
         display='';
         filters[0].play();
      }
  }
  function cs(captionBG,bodyBG,tableBG){
oldBody=document.body;
     with(oldBody){
         var newBody=cloneNode();
        style.filter='blendtrans(duration=1)';
         filters[0].apply();
       with(document.styleSheets[0]){
              with(rules[0].style){backgroundColor=captionBG;}
           with(rules[1].style){backgroundColor=bodyBG;}
            with(rules[2].style){backgroundColor=tableBG}
       }
         filters[0].play();
        setTimeout(function(){
                 if(oldBody!=null){
                    oldBody.applyElement(newBody, "inside")
                   oldBody.swapNode(newBody);
                   oldBody.removeNode(true);
                    }
                },1500);
     }
}
//-->
</script>
<style type="text/css">
<!--
.caption {
     font-size: 9px;
     color: #FFFFFF;
     background-color: #00CCFF;
     padding-left: 5px;
    cursor: default;
     font-family: "Verdana", "Arial";
     border: 1px inset;
}
body {
     background-color: #f6f6f6;
     border: 1px inset;
     overflow: hidden;
}
table {
     background-color: #eeeeee;
}
td {
   font-family: "Verdana", "Arial";
     font-size: 9px;
     border: 0px;
}
.win {
    filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90)
}
a {
     text-decoration: none;
     color: #003399;
}
a:hover {
    color: #FF0000;
}
input {
     font-family: "Verdana", "Arial";
     font-size: 9px;
     border-width: 1px;
}
.statusbar {
    font-family: "Tahoma", "Verdana";
     font-size: 9px;
     color: #999999;
     padding-left: 3px;
}
  .button {
     border: 1px outset;
     text-align: center;
}
.navframe {
     padding: 5px;
}
-->
</style>
</head>
<body>
<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,'')">
        <table width="180" border="1" cellpadding="0" cellspacing="0">
                <tr>
                         <td class="caption">SeekAssist</td>
                        <td width="14" align="center"><a href="#" onClick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
                        <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
                 </tr>
                 <tr id="assistwin">
                        <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
                </tr>
  </table>
         <br>
</div>
<script>loadwin('assist')</script>
<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,'')">
        <table width="180" border="1" cellpadding="0" cellspacing="0">
                <tr>
                        <td class="caption">SeekRank</td>
                       <td width="14" align="center"><a href="#" onClick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
                        <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
                </tr>
                <tr id="rankwin">
                        <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
                </tr>
  </table>
        <br>
</div>
<script>setTimeout("loadwin('rank')",500)</script>
<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,'')">
       <table width="180" border="1" cellpadding="0" cellspacing="0">
              <tr>
                        <td class="caption">MyColor</td>
                        <td width="14" align="center"><a href="http://www.jsweb8.cn" onClick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
                       <td width="14" align="center"><a href="http://www.jsweb8.cn" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
                 </tr>
                <tr id="mycolorwin">
                        <td height="100" colspan="3" bordercolor="http://www.jsweb8.cneeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                               <tr>
                                       <td align="center"><a href="#" onClick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
                               </tr>
                             <tr>
                                         <td align="center"><a href="#" onClick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
                               </tr>
                                 <tr>
                                       <td align="center"><a href="#" onClick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onClick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onClick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onClick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
                               </tr>
                        </table></td>
                 </tr>
   </table>
         <br>
</div>
<script>setTimeout("loadwin('mycolor')",1000)</script>
<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,'')">
         <table width="570" border="1" cellpadding="0" cellspacing="0">
                 <tr>
                         <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                                <td class="caption">Results</td>
                                                 <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
                                                <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
                                         </tr>
                         </table></td>
                 </tr>
                 <tr>
                        <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100">
                        <a href="#" onClick="mainframe.location=url.value">Search</a></td>
                 </tr>
                <tr id="resultswin">
                        <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>
                 </tr>
                 <tr>
                        <td height="14" class="statusbar">Ready!</td>
                 </tr>
   </table>
         <br>
</div>
<script>setTimeout("loadwin('results')",2000)</script>
</body>
</html>
分享到：
| 图片滚动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    圣诞节，写个程序练练手————Android 全界面悬浮按钮实现

    通过获取全局的`WindowManager`服务，我们可以创建一个始终浮现在屏幕上的视图，实现悬浮按钮。需要注意的是，全局`WindowManager`可以通过`getApplication().getSystemService(Context.WINDOW_SERVICE)`获取，而...

    OpenCV移植window_QT.cpp

    在OpenCV库中，开发GUI应用通常会借助于Qt框架，因为Qt提供了丰富的图形界面组件和易用的事件处理机制。"OpenCV移植window_QT.cpp"是一个将OpenCV与Qt结合的应用示例，用于实现图像查看和交互功能。下面我们将详细...

    浮动且拖动的窗口视频播放功能效果

    1. **PopupWindow**：在Android中，`PopupWindow` 是一个非常重要的组件，它能够创建一个浮现在当前Activity之上的窗口。在这个项目中，`PopupWindow` 被用来承载视频播放器，使视频窗口可以悬浮在主屏幕上，并且...

    酷点桌面美化软件 v3.21.zip

    2、醒目文字提示：鼠标只要悬浮在图标上面，立即浮现特效文字说明，字体颜色由您定义。 3、酷爽动画效果：酷点在您拖入拖出图标时，均有酷毙的动画效果，内置多种特效让您选择。 4、自由键鼠控制：您可以使用鼠标...

    窗体的浮动及隐藏

    在Windows操作系统中，例如，你可以将任务栏设置为自动隐藏，当鼠标移开时，任务栏会自动浮现在屏幕下方；反之，鼠标靠近时，它又会隐藏起来。在编程中，实现窗体浮动通常涉及窗口位置的动态更新和用户输入事件的...

    悬浮对话框

    在IT行业中，悬浮对话框是一种常见的用户界面元素，它能够在屏幕的任意位置浮动显示，为用户提供即时信息或者交互功能，而不会遮挡主界面的内容。悬浮对话框的设计初衷是为了提高用户体验，让用户在进行主要操作的...

    jQuery带二维码登录窗口弹出层特效.zip

    本项目"jQuery带二维码登录窗口弹出层特效"正是利用jQuery的特性，为网页登录界面添加了一种新颖的交互方式——二维码扫描登录。 首先，我们需要理解“弹出层特效”这一概念。在网页设计中，弹出层通常是指一种不...

    仿QQ侧滑和popupWindow

    GestureDetector可以监听用户的滑动、点击等基本手势，而ViewDragHelper则更适合处理视图拖拽，如实现侧滑菜单的滑入滑出效果。 3. **Fragment和Activity管理**：侧滑菜单通常与Fragment配合使用，Fragment可以作为...

    UIParticleRenderer.zip

    在Unity3D（简称U3D）的开发过程中，UI粒子特效的使用可以为游戏或应用增添丰富的视觉效果，但如何让这些粒子特效恰如其分地出现在用户界面（UI）之上，而不会被其他UI元素遮挡，是一个常见的技术挑战。本文将详细...

    JQuery弹出有遮罩的对话框

    对话框是一种用户界面元素，它可以暂时浮现在页面上，吸引用户的注意力，通常包含特定信息或要求用户进行交互。而遮罩层（Mask）则是一个半透明的覆盖层，用于屏蔽背景页面，突出对话框，让用户专注于当前的任务。 ...

    c# winform 类似android toast消息功能

    因此，我们需要自定义一个控件，这个控件能够浮现在窗体之上，并在一段时间后自动消失。 1. **创建自定义控件**：首先，创建一个新的用户控件（UserControl）类，命名为`ToastMessage`。在这个类中，可以包含一个...

    悬浮框 android

    通过这个服务，开发者可以将View添加到系统的窗口层次结构中，使其浮现在其他应用之上。要使用WindowManager，首先需要在AndroidManifest.xml文件中声明相应的权限： ```xml ``` 然后，在代码中获取WindowManager...

    android自定义seekbar源码.zip

    这个项目的核心在于自定义了一个Seekbar，通过重写其默认行为并添加附加功能，实现了在用户拖动thumb时，上方会有一个浮动窗口显示当前的进度。这种设计可以使用户更直观地了解他们正在做出的选择，尤其是在需要精确...

    VC++常用功能实例

    问：如何限制mdi子框架最大化时的大小? 66 问：如何切换视口而不破坏它们? 66 问：改变列表控制时发生闪烁现象? 68 问：处理列表控件可见项的问题? 68 问：产生线程的问题? 68 问：CFile使用了缓冲区吗? 69 问：DAO...

    VC++常用的共用函数100多页

    问：如何限制mdi子框架最大化时的大小? 66 问：如何切换视口而不破坏它们? 66 问：改变列表控制时发生闪烁现象? 68 问：处理列表控件可见项的问题? 68 问：产生线程的问题? 68 问：CFile使用了缓冲区吗? 69 问：DAO...

Magicbox
Global site tag (gtag.js) - Google Analytics