可拖动窗口,附带鼠标控制渐变透明,开启关闭功能


Posted in Javascript onJune 26, 2006

<style type="text/css">
<!--
#Layer1 {
 position:absolute;
 width:210px;
 height:160px;
 z-index:1;
 left: 178px;
 top: 322px;
 background-color: #FFFBF0;
}
#content {
 position:absolute;
 width:200px;
 height:115px;
 z-index:1;
 left: 0px;
 top: 27px;
 border: 1px solid #666666;
}
#bar {
 position:absolute;
 width:200px;
 height:25px;
 z-index:2;
 background-color: #00FF33;
 left: 0px;
 top: 0px;
}
#but_1 {
 position:absolute;
 width:14px;
 height:14px;
 z-index:3;
 left: 183px;
 top: 6px;
 overflow: hidden;
 background-color: #333333;
}
#but_2 {
 position:absolute;
 width:10px;
 height:10px;
 z-index:4;
 left: 164px;
 top: 6px;
 background-color: #00FF33;
 border: 2px solid #666666;
 overflow: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
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_scanStyles(obj, prop) { //v8.0
  var inlineStyle = null; var ccProp = prop; var dash = ccProp.indexOf("-");
  while (dash != -1){ccProp = ccProp.substring(0, dash) + ccProp.substring(dash+1,dash+2).toUpperCase() + ccProp.substring(dash+2); dash = ccProp.indexOf("-");}
  inlineStyle = eval("obj.style." + ccProp);
  if(inlineStyle) return inlineStyle;
  var ss = document.styleSheets;
  for (var x = 0; x < ss.length; x++) { var rules = ss[x].cssRules;
 for (var y = 0; y < rules.length; y++) { var z = rules[y].style;
   if(z[prop] && (rules[y].selectorText == '*[ID"' + obj.id + '"]')) {
        return z[prop];
  }  }  }  return "";
}

function MM_getProp(obj, prop) { //v8.0
  if (!obj) return ("");
  if (prop == "L") return obj.offsetLeft;
  else if (prop == "T") return obj.offsetTop;
  else if (prop == "W") return obj.offsetWidth;
  else if (prop == "H") return obj.offsetHeight;
  else {
    if (typeof(window.getComputedStyle) == "undefined") {
     if (typeof(obj.currentStyle) == "undefined"){
      if (prop == "P") return MM_scanStyles(obj,"position");
        else if (prop == "Z") return MM_scanStyles(obj,"z-index");
        else if (prop == "V") return MM_scanStyles(obj,"visibility");
     } else {
       if (prop == "P") return obj.currentStyle.position;
        else if (prop == "Z") return obj.currentStyle.zIndex;
        else if (prop == "V") return obj.currentStyle.visibility;
     }
    } else {
     if (prop == "P") return window.getComputedStyle(obj,null).getPropertyValue("position");
      else if (prop == "Z") return window.getComputedStyle(obj,null).getPropertyValue("z-index");
      else if (prop == "V") return window.getComputedStyle(obj,null).getPropertyValue("visibility");
    }
  }
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v8.0
  //Copyright 2005 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 (MM_getProp(spns[i],'P')) allLayers[allLayers.length]=spns[i];}
        for (i=0;i<all.length;i++) {
   if (NS4){if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
          else if (MM_getProp(all[i],'P')) 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:MM_getProp(curDrag,'Z');
    curLeft= (NS4)?curDrag.left:MM_getProp(curDrag,'L');
    if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
    curTop = (NS4)?curDrag.top:MM_getProp(curDrag,'T');
    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:MM_getProp(aLayer,'Z');
        if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
        var isVisible = ((NS4)?aLayer.visibility:MM_getProp(aLayer,'V')).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 != document && MM_getProp(parentLayer,'P')) {
              parentL += parseInt(MM_getProp(parentLayer,'L')); parentT += parseInt(MM_getProp(parentLayer,'T'));
              parentLayer = parentLayer.parentNode;
              if (parentLayer==document) parentLayer = null;
          } } else if (IE) { parentLayer = aLayer.parentElement;      
            while (parentLayer != null && MM_getProp(parentLayer,'P')) {
              parentL += MM_getProp(parentLayer,'L'); parentT += MM_getProp(parentLayer,'T');
              parentLayer = parentLayer.parentElement; } }
          var tmpX=mouseX-((NS4)?pageX:(MM_getProp(aLayer,'L'))+parentL+MM_hLeft);
          var tmpY=mouseY-((NS4)?pageY:(MM_getProp(aLayer,'T'))+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:MM_getProp(aLayer,'W');
          var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += (NS4)?clip.height:MM_getProp(aLayer,'H');
          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:MM_getProp(curDrag,'L');
        curTop = (NS4)?curDrag.top:MM_getProp(curDrag,'T');
        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) {
          var newZ = parseInt(document.MM_maxZ)+1;
          eval('curDrag.'+((NS4)?'':'style.')+'zIndex=newZ');
          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;
        var newLeft = mouseX-MM_oldX; var 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 + "px"; style.top = newTop + "px";}
        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:MM_getProp(document.MM_curDrag,'L')),2)+
             Math.pow(MM_targT-((NS4)?top:MM_getProp(document.MM_curDrag,'T')),2))<=MM_tol) {
          if (NS4) {left = MM_targL; top = MM_targT;}
          else if (NS6) {style.left = MM_targL + "px"; style.top = MM_targT + "px";}
          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;
}
//-->
</script>

<script>
<!--
// code by windy_sk
var timer=null;
var org_opacity=30;
var step=5;
var ext_time=30;

function doit(img,mode){
  clearTimeout(timer);
  if(img.style.filter.indexOf("alpha")==-1)img.style.filter+="alpha(opacity="+org_opacity+")";
  var cur_level=img.filters.alpha.opacity;
  if(mode){
    cur_level+=step;
    if(cur_level>100)cur_level=100;
  }else{
    cur_level-=step;
    if(cur_level<org_opacity)cur_level=org_opacity;
  }
  img.filters.alpha.opacity=cur_level;
  if(cur_level!=100 && cur_level!==ext_time)
    timer=setTimeout("doit("+img.id+","+mode+")",ext_time)
}

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; }
}
//-->
</script>
</head>

<body onload="MM_dragLayer('Layer1','',0,0,0,0,true,false,-1,-1,-1,-1,false,false,0,'',false,'')">

<body bgcolor="#FFFBF0">


<div id="Layer1" style="filter: alpha(opacity=30)" onmouseover=doit(this,true) onmouseout=doit(this,false) >
  <div id="content"><img src="/img/common/logo.gif" name="test" width=90 height=27 border="0" id="test"  /></div>
  <div id="bar"></div>
  <div id="but_1" onclick="MM_showHideLayers('content','','show')"></div>
  <div id="but_2" onclick="MM_showHideLayers('content','','hide')"></div>
</div>

Javascript 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
YUI模块开发原理详解
Nov 18 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
Jquery-data的三种用法
Apr 18 jQuery
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
Seajs源码详解分析
Apr 02 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
一端时间轮换的广告
Jun 26 #Javascript
将HTML自动转为JS代码
Jun 26 #Javascript
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 #Javascript
网站上面有这种切换效果
Jun 26 #Javascript
accesskey 提交
Jun 26 #Javascript
Ctrl+Enter提交内容信息
Jun 26 #Javascript
漂亮的仿flash菜单,来自蓝色经典
Jun 26 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
医院办公室主任职责
2013/12/29 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS