zoukankan      html  css  js  c++  java
  • js拖动窗口 用层模拟可移动的小窗口

    用层模拟可移动的小窗口
    <style type='text/css'>
    <!--
    body
    a:visited
    a:hover
    a:link
    -->
    </style>
    <script language=JScript>
    <!--
    //可以打包为js文件;
    var x0=0,y0=0,x1=0,y1=0;
    var offx=6,offy=6;
    var moveable=false;
    var hover='orange',normal='#336699';//color;
    var index=10000;//z-index;
    //开始拖动;
    function startDrag(obj)
    {
    if(event.button==1)
    {
    //锁定标题栏;
    obj.setCapture();
    //定义对象;
    var win = obj.parentNode;
    var sha = win.nextSibling;
    //记录鼠标和层位置;
    x0 = event.clientX;
    y0 = event.clientY;
    x1 = parseInt(win.style.left);
    y1 = parseInt(win.style.top);
    //记录颜色;
    normal = obj.style.backgroundColor;
    //改变风格;
    obj.style.backgroundColor = hover;
    win.style.borderColor = hover;
    obj.nextSibling.style.color = hover;
    sha.style.left = x1 + offx;
    sha.style.top = y1 + offy;
    moveable = true;
    }
    }
    //拖动;
    function drag(obj)
    {
    if(moveable)
    {
    var win = obj.parentNode;
    var sha = win.nextSibling;
    win.style.left = x1 + event.clientX - x0;
    win.style.top = y1 + event.clientY - y0;
    sha.style.left = parseInt(win.style.left) + offx;
    sha.style.top = parseInt(win.style.top) + offy;
    }
    }
    //停止拖动;
    function stopDrag(obj)
    {
    if(moveable)
    {
    var win = obj.parentNode;
    var sha = win.nextSibling;
    var msg = obj.nextSibling;
    win.style.borderColor = normal;
    obj.style.backgroundColor = normal;
    msg.style.color = normal;
    sha.style.left = obj.parentNode.style.left;
    sha.style.top = obj.parentNode.style.top;
    obj.releaseCapture();
    moveable = false;
    }
    }
    //获得焦点;
    function getFocus(obj)
    {
    if(obj.style.zIndex!=index)
    {
    index = index + 2;
    var idx = index;
    obj.style.zIndex=idx;
    obj.nextSibling.style.zIndex=idx-1;
    }
    }
    //最小化;
    function min(obj)
    {
    var win = obj.parentNode.parentNode;
    var sha = win.nextSibling;
    var tit = obj.parentNode;
    var msg = tit.nextSibling;
    var flg = msg.style.display=="none";
    if(flg)
    {
    win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
    sha.style.height = win.style.height;
    msg.style.display = "block";
    obj.innerHTML = "0";
    }
    else
    {
    win.style.height = parseInt(tit.style.height) + 2*2;
    sha.style.height = win.style.height;
    obj.innerHTML = "2";
    msg.style.display = "none";
    }
    }
    //创建一个对象;
    function xWin(id,w,h,l,t,tit,msg)
    {
    index = index+2;
    this.id = id;
    this.width = w;
    this.height = h;
    this.left = l;
    this.top = t;
    this.zIndex = index;
    this.title = tit;
    this.message = msg;
    this.obj = null;
    this.bulid = bulid;
    this.bulid();
    }
    //初始化;
    function bulid()
    {
    var str = ""
    + "<div id=xMsg" + this.id + " "
    + "style='"
    + "z-index:" + this.zIndex + ";"
    + "" + this.width + ";"
    + "height:" + this.height + ";"
    + "left:" + this.left + ";"
    + "top:" + this.top + ";"
    + "background-color:" + normal + ";"
    + "color:" + normal + ";"
    + "font-size:8pt;"
    + "font-family:Tahoma;"
    + "position:absolute;"
    + "cursor:default;"
    + "border:2px solid " + normal + ";"
    + "' "
    + "onmousedown='getFocus(this)'>"
    + "<div "
    + "style='"
    + "background-color:" + normal + ";"
    + "" + (this.width-2*2) + ";"
    + "height:20;"
    + "color:white;"
    + "' "
    + "onmousedown='startDrag(this)' "
    + "onmouseup='stopDrag(this)' "
    + "onmousemove='drag(this)' "
    + "ondblclick='min(this.childNodes[1])'"
    + ">"
    + "<span style='" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
    + "<span style='12;border-0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
    + "<span style='12;border-0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
    + "</div>"
    + "<div style='"
    + "100%;"
    + "height:" + (this.height-20-4) + ";"
    + "background-color:white;"
    + "line-height:14px;"
    + "word-break:break-all;"
    + "padding:3px;"
    + "'>" + this.message + "</div>"
    + "</div>"
    + "<div id=xMsg" + this.id + "bg style='"
    + "" + this.width + ";"
    + "height:" + this.height + ";"
    + "top:" + this.top + ";"
    + "left:" + this.left + ";"
    + "z-index:" + (this.zIndex-1) + ";"
    + "position:absolute;"
    + "background-color:black;"
    + "filter:alpha(opacity=40);"
    + "'></div>";
    document.body.insertAdjacentHTML("beforeEnd",str);
    }
    //显示隐藏窗口
    function ShowHide(id,dis){
    var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
    document.getElementById("xMsg"+id).style.display = bdisplay;
    document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
    }
    //-->
    </script>
    <script language='JScript'>
    <!--
    function initialize()
    {
    var a = new xWin("1",160,200,200,200,"窗口1","xWin A Cool Pop Div WindowXueMu.Net2006-5-13");
    var b = new xWin("2",240,200,100,100,"窗口2","Welcome to visited my personal website:<a href=http://www.52baodian.com target=_blank>http://www.52baodian.com</a>请多提建议噢感谢您的关注!"); 
    var c = new xWin("3",200,160,250,50,"窗口3","Copyright by <a href='#'>Wildwind</a>!");
    ShowHide("1","none");//隐藏窗口1
    }
    window.onload = initialize;
    //-->
    </script>
    <base target="_blank">
    <a onClick="ShowHide('1',null);return false;" href="">窗口1</a>
    <a onClick="ShowHide('2',null);return false;" href="">窗口2</a>
    <a onClick="ShowHide('3',null);return false;" href="">窗口3</a>
  • 相关阅读:
    Azure 虚拟机安全加固整理
    AzureARM 使用 powershell 扩容系统磁盘大小
    Azure Linux 云主机使用Root超级用户登录
    Open edX 配置 O365 SMTP
    powershell 根据错误GUID查寻错误详情
    azure 创建redhat镜像帮助
    Azure Powershell blob中指定的vhd创建虚拟机
    Azure Powershell 获取可用镜像 PublisherName,Offer,Skus,Version
    Power BI 连接到 Azure 账单,自动生成报表,可刷新
    Azure powershell 获取 vmSize 可用列表的命令
  • 原文地址:https://www.cnblogs.com/top5/p/1972372.html
Copyright © 2011-2022 走看看