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


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 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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列出MySQL中所有数据库的方法
2015/03/12 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
python删除文件示例分享
2014/01/28 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
函数指针的定义是什么
2016/08/14 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
一名女生的自荐信
2013/12/08 职场文书
音乐专业自荐信
2014/02/07 职场文书
财产公证书样本
2014/04/04 职场文书
网站创业计划书
2014/04/30 职场文书
庆六一活动总结
2014/08/29 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL