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


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 鼠标点击事件及其它捕获
Jun 04 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
一端时间轮换的广告
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 xml 入门学习资料
2011/01/01 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python视频按帧截取图片工具
2019/07/23 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python 穷举指定长度的密码例子
2020/04/02 Python
python可迭代对象去重实例
2020/05/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
工商技校毕业生自荐信
2013/11/15 职场文书
七一党建活动方案
2014/01/28 职场文书
培训专员岗位职责
2014/02/26 职场文书
宣传标语大全
2014/07/01 职场文书
初中毕业感言300字
2015/07/31 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
python实现的web监控系统
2021/04/27 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang