拖动层模拟窗口效果-1NetMedia_Blog-※『一网传媒』博客系统※

今在经典论坛上发现的拖动层模拟窗口效果。

T1:

<style type="text/css">
  .divWindow{word-wrap:break-word;position:absolute; overflow:hidden;}
  .divBar{border:#FFFFFF 1px ridge;position:absolute;width:100%;height:20px;background-color: #3366FF;cursor:pointer;line-height:20px; color: #FFFFFF;}
  .divChange{position:absolute;right:25px;font-size:9pt;}
  .divClose{position:absolute;right:5px;font-size:10pt;}
  .divTitle{position:absolute;left:5px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;font-size:9pt;}
  .divContent{border:#FFFFFF 1px outset;border-top:#AAAAAA 0px outset;position:absolute; top:20px;width:100%; background-color:#FFFFFF; overflow-y:auto;
        SCROLLBAR-BASE-COLOR: #FFFFFF;SCROLLBAR-ARROW-COLOR: #999999;SCROLLBAR-FACE-COLOR: #EEEEEE;SCROLLBAR-HIGHLIGHT-COLOR: #EEEEEE; padding:2px;
        SCROLLBAR-SHADOW-COLOR: #EEEEEE;SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;SCROLLBAR-TRACK-COLOR: #FFFFFF;SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC; font-size:9pt;}
  .divReSize{height:17px; width:17px; overflow:hidden; background-color:#FFFFFF; position:absolute; bottom:1px; right:1px; cursor:nw-resize}
  .divIframe{height:100%;width:100%;}
</style>
<script language="javascript">
var zindex=0                              //全局变量
function dragClass(name,title,content,left,top,width,height){
var isMouseDown=false;
var maximum=false;
var offX=0;                                //设置抓取点X坐标
var offY=0;                                //设置抓取点Y坐标
var oldLeft;                              //保存正常状态的X坐标
var oldTop;                                //保存正常状态的Y坐标
var mousedown= function (ev){                      //按下拖动点
  if(window.Event){
    offX=parseInt(ev.pageX)-parseInt(Window.style.left);
    offY=parseInt(ev.pageY)-parseInt(Window.style.top);
    document.addEventListener("mousemove",mousemove,true);      //addEventListener加到document对象,在FF下甩不掉
  }else{
     Bar.setCapture();                         //设置抓取
     offX=parseInt(event.clientX)-parseInt(Window.style.left);
     offY=parseInt(event.clientY)-parseInt(Window.style.top);
  }
  isMouseDown=true;
  if(Window.style.zIndex<=zindex){
    zindex++;
    Window.style.zIndex=zindex;
  }
}
var mousemove= function (ev){                      //拖动窗口
     if (isMouseDown && !maximum){
      Bar.style.cursor='move';
     if(window.Event){
      Window.style.left=(ev.pageX-offX)+'px';
      Window.style.top=(ev.pageY-offY)+'px';
    }else{
      Window.style.left=(event.clientX-offX)+'px';
      Window.style.top=(event.clientY-offY)+'px';
    }
    if(Window.style.zIndex<=zindex){
      zindex++;
      Window.style.zIndex=zindex;
    }
     }
}
var mouseup=function (){                        //松开按钮
  if(window.Event){
    document.removeEventListener("mousemove",mousemove,true);
  }else{
    Bar.releaseCapture();                         //取消抓取
  }
    Bar.style.cursor='pointer';
  if (parseInt(Window.style.top)<0){
     Window.style.top='0px';
  }
  if (parseInt(Window.style.left)<0){
     Window.style.left='0px';
  }
  isMouseDown=false;
}
var dblclick=function (){                        //双击最大最小化
     if (!maximum){
      oldLeft=Window.style.left;                  //保存正常状态的X坐标
      oldTop=Window.style.top;                    //保存正常状态的Y坐标
      Window.style.left='0px';
      Window.style.top='0px';
      Window.style.width= document.body.clientWidth+'px';        //网页可见区域宽
      Title.style.width=(document.body.clientWidth-40)+'px';    //设置标题长度
      ReSize.style.display='none';
      if(Change.innerText=='－'){
         Window.style.height='100%';
         Content.style.height=(document.body.clientHeight-20)+'px';    //网页可见区域宽-标题高度
      }else{
         Window.style.height='20px';
      }
      maximum=true;
     }else{
      Window.style.left=oldLeft;
      Window.style.top=oldTop;
      Window.style.width=width+'px';
      Title.style.width=(width-40)+'px';
      ReSize.style.display='';
      if(Change.innerText=='－'){
         Window.style.height=height+'px';
         Content.style.height=parseInt(height-20)+'px';
      }else{
        ReSize.style.display='none';
        Window.style.height='20px';
      }
      maximum=false;
     }
  if(Window.style.zIndex<=zindex){
    zindex++;
    Window.style.zIndex=zindex;
  }
}
var changeWindow=function (){                      //收缩窗口
     event.cancelBubble=true;
   if(Change.innerText=='－'){
      Window.style.height='20px';
      Change.innerText='□';
      Content.style.display='none';
      ReSize.style.display='none';
     }else{
      if (maximum){
         Window.style.height='100%';
         Content.style.display='';
         ReSize.style.display='';
         Content.style.height=(document.body.clientHeight-20)+'px';    //网页可见区域宽-标题高度
      }else{
         Window.style.height=height+'px';
         Content.style.display='';
         ReSize.style.display='';
         Content.style.height=parseInt(height-20)+'px';
      }
      Change.innerText='－';
     }
}
//--------------------------------------------DIV-------------------------------------------------//
var Window=document.createElement("div");
  Window.id="divWindow"+ name;
  Window.className="divWindow";
  Window.style.left=left+'px';
  Window.style.top=top+'px';
  Window.style.width=width+'px';
  Window.style.height=height+'px';
  Window.onclick=function(){
    if(parseInt(Window.style.zIndex)<=zindex){
      zindex++;
      Window.style.zIndex=zindex;
    }
  }
this.Window=Window;                          //公有属性，类外可操作；若要在类外操作，可将元素改为公有属性
  
var Bar=document.createElement("div");
  Bar.id="divBar"+name;
  Bar.onselectstart="return false";
  Bar.className="divBar";
  Bar.onmousedown=mousedown;
  Bar.ondblclick=dblclick;
  Bar.onmousemove=mousemove;
  Bar.onmouseup=mouseup;
  Window.appendChild(Bar);
var Title=document.createElement("div");
  Title.id="divTitle"+ name;
  Title.className="divTitle";
  Title.style.width=(width-40)+'px';                //自适应标题长度
  Title.innerText=title;
  Bar.appendChild(Title);
var Change=document.createElement("div");
  Change.id="divChange"+ name;
  Change.className="divChange";
  Change.innerText="－";
  Change.ondblclick=changeWindow;
  Change.onclick=changeWindow;
  Bar.appendChild(Change);
var Close=document.createElement("div");
  Close.id="divClose"+ name;
  Close.onclick=function(){
    Window.style.display='none';
  }
  Close.className="divClose";
  Close.innerText="×";
  Bar.appendChild(Close);
var Content=document.createElement("div");
  Content.id="divContent"+ name;
  Content.className="divContent"
  Content.innerHTML=content;
  Content.style.height=parseInt(height-20)+'px';
  Window.appendChild(Content);
  
var ReSize=document.createElement("div");
  ReSize.className="divReSize";
  ReSize.innerHTML="<div style=\"overflow:hidden; background-color:#FFFFFF; position:absolute; right:2px; bottom:2px; width:5px; height:5px;border:#AAAAAA 1px outset;\"><div>";
  ReSize.onmousedown=function(ev){
  
    if(Window.style.zIndex<=zindex){
      zindex++;
      Window.style.zIndex=zindex;
    }
    if(window.Event){
      document.addEventListener("mousemove",ReSize.onmousemove,true);      //addEventListener加到document对象,在FF下甩不掉
    }else{
      ReSize.setCapture();
    }
      isMouseDown=true;
  }
  ReSize.onmousemove=function(ev){
     if (isMouseDown && !maximum)
     {
       if(window.Event){
        width=parseInt(ev.pageX)-parseInt(Window.style.left)+5;
        height=parseInt(ev.pageY)-parseInt(Window.style.top)+5;
      }else{
        width=parseInt(event.clientX)-parseInt(Window.style.left)+5;
        height=parseInt(event.clientY)-parseInt(Window.style.top)+5;
      }
      if(width>100){              //设置最小宽度
        Window.style.width=width+'px';
        Title.style.width=(width-40)+'px';
      }else{
        width=100;
      }
      if(height>100){              //设置最小高度
        Window.style.height=height+'px';
        Content.style.height=parseInt(height-20)+'px';
      }else{
        height=100;
      }
     }
  }
  ReSize.onmouseup=function(ev){
    if(window.Event){
      document.removeEventListener("mousemove",ReSize.onmousemove,true);  
    }else{
      ReSize.releaseCapture();
    }
    isMouseDown=false;
  }
  Window.appendChild(ReSize);
if(!window.Event){
  var Iframe=document.createElement("iframe");  //添加iframe，IE6.0下遮挡<select>控件
  Iframe.className="divIframe";
  Window.appendChild(Iframe);
}
  
  document.body.appendChild(Window);
//--------------------------------------------DIV-------------------------------------------------//
}
</script>
<body>
<select style="position:absolute; top:600;"></select>
<script>
//dragClass(ID,窗口标题,内容,X坐标,Y坐标,宽,长)
var c1="窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1窗口1";
objWin1=new dragClass('win1','拖动窗口1',c1,0,60,300,300);
var c2="窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2窗口2";
objWin2=new dragClass('win2','拖动窗口2',c2,350,60,300,300);
var objWin3;
function openWin(){
  if(objWin3==null){
    var c3="123窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3窗口3";
    objWin3=new dragClass('win3',c3,c3,700,60,300,300);
  }else{
     if(objWin3.Window.style.display=='none'){
      objWin3.Window.style.display='';
     }
  }
}
</script>
<input type="button" value="弹出【窗口3】" onClick="openWin()" />
</body>

另存代码提示：您可以先修改部分代码再运行

T2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>窗口模拟--Author:Vibo Email:vibo_cn@hotmail.com</title>
<style type="text/css">
<!--
body,td,th {
    font-family: Arial, 宋体;
    font-size: 12px;
}
.webWinFrame {
    position: absolute;
    left:15px;
    top:15px;
    padding: 3px;
    background-color: #EEEEEE;
}
.webWin {
    width: 300px;
    border: 1px solid #80C65A;
    background-color: #FFFFFF;
}
.webWin .wTitle{
    line-height: 18px;
    padding: 2px;
    font-weight: bold;
    cursor:move;
    background-color: #DDF8CC;
    /*display:inline-block;*/
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.webWin .wContent {
    overflow:hidden;
}
.webWin .wResizeBox {
    background-color: #80C65A;
    height: 5px;
    width: 5px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    overflow:hidden;
    cursor:se-resize;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div class="webWinFrame" id="testWinA"><div class="webWin"><div class="wTitle">TitleA-ViboStudio</div><div class="wContent">
<!---->
<div style="width:300px;height:200px;padding:2px;">
此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br />
此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br />
此处显示新 Div 标签的内容<br />
此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br />
此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br />
此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br />
此处显示新 Div 标签的内容此处显示新 Div 标签的内容<br />
</div>
<!---->
</div><div class="wResizeBox"></div></div></div>
<div class="webWinFrame" id="testWinB" style="top:110px;"><div class="webWin"><div class="wTitle">TitleB</div><div class="wContent">
<!---->
此处显示新 Div 标签的内容
此处显示新 Div 标签的内容
此处显示新 Div 标签的内容
<!---->
</div><div class="wResizeBox"></div></div></div>
<script type="text/javascript">
window.$ = function(obj){return (document.getElementById)?document.getElementById(obj):(document.all)?document.all[obj]:obj}
window.isIE = window.Event?false:true;
window.getMouseCoords=function(e){return {x:isIE?e.clientX+Math.max(document.body.scrollLeft, document.documentElement.scrollLeft):e.pageX,        y:isIE?e.clientY+Math.max(document.body.scrollTop, document.documentElement.scrollTop):e.pageY};}
window.vWinZIndex = 1;
function vDrag(o,ho,initArr){
    ho=ho||o;
    o.style.position="absolute";
    if(!isIE){ho.firstChild.onmousedown=function(){return false;}}    
    ho.onmousedown=function(a){
        o.style.zIndex = window.vWinZIndex;
        window.vWinZIndex++;
        var d=document;if(!a)a=window.event;
        var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
        if(ho.setCapture)
            ho.setCapture();
        else if(window.captureEvents)
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
        d.onmousemove=function(a){
            if(!a)a=window.event;
            var mus=getMouseCoords(a)
            if(!a.pageX)a.pageX=mus.x;
            if(!a.pageY)a.pageY=mus.y;
            var tx=a.pageX-x,ty=a.pageY-y;
            if(initArr){
                o.style.left=(tx<initArr[0]?initArr[0]:tx>initArr[2]?initArr[2]:tx)+"px";
                o.style.top=(ty<initArr[1]?initArr[1]:ty>initArr[3]?initArr[3]:ty)+"px";
            }else{
                o.style.left = tx+"px";
                o.style.top = ty+"px";
            }
        };
        d.onmouseup=function(){
            if(ho.releaseCapture)
                ho.releaseCapture();
            else if(window.captureEvents)
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            d.onmousemove=null;
            d.onmouseup=null;
        };
    };
}
function createWebWindow(o,intW,intH){
    o.style.zIndex = window.vWinZIndex;
    window.vWinZIndex++;
    var winSelf = o.childNodes[0];
    var winTitle = o.childNodes[0].childNodes[0];
    var winContent = o.childNodes[0].childNodes[1];
    var winDbox = o.childNodes[0].childNodes[2];
    var minW =50,minH = 40;
    var _self = this;
    //
    var wX = winSelf.offsetWidth-winContent.offsetWidth;
    var wH = winSelf.offsetHeight-winContent.offsetHeight;
    //
    winDbox.onmousedown = function(e){
        o.style.zIndex = window.vWinZIndex;
        window.vWinZIndex++;
        var d=document;if(!e)e=window.event;
        var x=e.layerX?e.layerX:e.offsetX,y=e.layerY?e.layerY:e.offsetY;
        var MCD=window.getMouseCoords(e)
        winSelf.startX=MCD.x;
        winSelf.startY=MCD.y;
        winSelf.startW=winSelf.offsetWidth;
        winSelf.startH=winSelf.offsetHeight;
        //
        if(winDbox.setCapture)
            winDbox.setCapture();
        else if(window.captureEvents)
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
        d.onmousemove =function(e){
            if(!e)e=window.event;
            var mus=getMouseCoords(e)
            var newW = (winSelf.startW +(mus.x-winSelf.startX));
            var newH = (winSelf.startH +(mus.y-winSelf.startY))
            resizeWin(newW,newH);
        }
        d.onmouseup=function(){
            if(winDbox.releaseCapture)
                winDbox.releaseCapture();
            else if(window.captureEvents)
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            d.onmousemove=null;
            d.onmouseup=null;
        }
    }
    function resizeWin(newW,newH){
            newW = newW < minW?minW:newW;
            newH = newH < minH?minH:newH;
            winSelf.style.width = newW+"px";
            winSelf.style.height = newH+"px";
            //
            winTitle.style.width = isIE?newW+"px":(newW-4)+"px";
            //
            winContent.style.width = (newW-wX)+"px";
            winContent.style.height = (newH-wH)+"px";
    }
    {
        resizeWin(intW,intH);
        vDrag(o,winTitle);
    }
}
createWebWindow($("testWinA"),300,75);
createWebWindow($("testWinB"),300,100);
</script>
</body>
</html>

另存代码提示：您可以先修改部分代码再运行

用户登陆
用户:
密码:
验证:

站点日历
<< < 2021 - 04 > >>
日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

发表评论
请先注册，才能发表评论！ - 注册 -