经典的带阴影的可拖动的浮动层


Posted in Javascript onJune 26, 2006

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyPixbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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.width :offsetWidth);
          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="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
      <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
    </tr>
    <tr id="mycolorwin">
      <td height="100" colspan="3" bordercolor="#eeeeee"><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>

 

Javascript 相关文章推荐
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
些很实用且必用的小脚本代码
Jun 26 #Javascript
如果文字过长,则将过长的部分变成省略号显示
Jun 26 #Javascript
接收键盘指令的脚本
Jun 26 #Javascript
客户端静态页面玩分页
Jun 26 #Javascript
图片之间的切换
Jun 26 #Javascript
超级强大的表单验证
Jun 26 #Javascript
Javascript调用XML制作连动下拉列表框
Jun 25 #Javascript
You might like
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
数控技校生自我鉴定
2014/03/02 职场文书
供应链金融服务方案
2014/05/25 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
总经理岗位职责
2015/02/04 职场文书
政府会议通知范文
2015/04/15 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Java8中接口的新特性使用指南
2021/11/01 Java/Android
Python中super().__init__()测试以及理解
2021/12/06 Python