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


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 相关文章推荐
用JavaScript修改CSS属性的代码
May 06 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
node Buffer缓存区常见操作示例
May 04 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
uniapp实现可滑动选项卡
Oct 21 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python传递参数方式小结
2015/04/17 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python lxml模块安装教程
2015/06/02 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
工作检讨书大全
2015/01/26 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android