js可拖动的后台界面

网络编程 2024/11/13 佚名

3 2 1

// ************************ 拖动 *********************************
    function setDrag(e){
            var drag_flag = true;
            var begin_x = getX(e);
            //添加蒙板
            createMask();
            //添加半透明拖动条
            createSplitDiv();

    function getX(e){
            if(window.event) e = window.event;
            return (e.x || e.clientX);
    }

    function createSplitDiv(){
        //半透明的拖动条
        var _top = $doc("topArea").offsetHeight +"px";
        var _left = $doc("dragBar").offsetLeft +"px";;
        var _height = $doc("dragBar").offsetHeight +"px";;

        var splitDivCss="position:absolute;width:6px;height:"+_height+";top:"+_top+";left:"+_left+";cursor:col-
resize;background-color:#cccccc;overflow:hidden;z-index:10010;filter:alpha(opacity=50);opacity:0.5;";
        var _splitDiv = document.createElement("div");
        _splitDiv.id = "splitDiv";
        _splitDiv.style.cssText = splitDivCss;

        document.body.appendChild(_splitDiv);

    }
    function createMask(){
            try{

                //创建背景
                var rootEl=document.documentElement||document.body;
                var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?
rootEl.clientHeight:rootEl.scrollHeight)+"px";
                var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)
+"px";
                var
shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#cccccc;z-
index:10000;filter:alpha(opacity=0);opacity:0";
                var _shield = document.createElement("div");
                _shield.id = "shield";
                _shield.style.cssText = shieldStyle;
                document.body.appendChild(_shield);
            }catch(e){}
        }
        //拖动时执行的函数
        document.onmousemove = function(e){
            try{
                if(drag_flag){
                        var now_x = getX(e);
                        var _pv = parseInt($doc("splitDiv").style.left)+ now_x - begin_x;
                        $doc("splitDiv").style.left = _pv +"px";
                         begin_x = now_x;
                }else{
                        $doc("leftShow").style.width = $doc("splitDiv").style.left;
                        document.body.removeChild($doc("shield"));
                        document.body.removeChild($doc("splitDiv"));
                        // 调整页面布局
                        resizePage();
                }
            }catch(e){}
        }

        document.onmouseup = function(){
            try{
                if(drag_flag){
                    //设定拖动条的位置（设定左侧的宽度）
                    $doc("leftShow").style.width = $doc("splitDiv").style.left;
                    document.body.removeChild($doc("shield"));
                    document.body.removeChild($doc("splitDiv"));
                    // 调整页面布局
                    resizePage();
                }
                drag_flag = false;
                begin_x = null;
            }catch(e){}
        }

    }

    if(window.attachEvent){
          window.attachEvent("onload",function(){resizePage();});
          window.attachEvent("onresize",function(){resizePage();});
    }
  if(window.addEventListener){
       window.addEventListener("load",function(){resizePage();},true);
       window.addEventListener("resize",function(){resizePage();},true);
  }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>可拖动的后台界面__jb51.net</title> <style type="text/css">  *{    margin: 0px;      font-size:12px;     font-family:"宋体";     color:#000000; } html,body{      height: 100%;      width: 100%;        overflow:hidden;       background-color:#EEEEEF; }  img{     padding:0px;     margin:0px;     vertical-align:middle;     border:0px; } .f_left{     float:left;     clear:right; } .f_right{     float:right ;     clear:right; } .topArea{     width:100%;     height:60px; } .logoArea{   float:left;   width:100%;   height:36px;   background-color:#EEEEEF; } .toolbarArea{   float:left;   width:100%;   height:24px;   background-color:#EEEEEF; } .bottomArea{     height:25px;     line-height:25px;   background-color:#EEEEEF ; } .leftBg{     background:#ffffff;     border:1px solid #BEBEBE; } .mainContent{   padding:0px; } .content_show{     float:left;     clear:right;     height:100%;     width:auto;     margin:0px;     padding:0px;     background-color:#ffffff;     border:1px solid #BEBEBE; } .splitBar{   width:6px;   height:100%;     cursor:col-resize; }     </style>  </head> <body>      &#160;     &#160;                                            </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

js,可拖动,后台界面

标签：

js,可拖动,后台界面

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“js可拖动的后台界面”

js可拖动的后台界面

暂无“js可拖动的后台界面”评论...

js可拖动的后台界面

js,可拖动,后台界面

js tr控制下面的tbody隐藏和显示

js判断ie方法集锦（含正则）代码短小经典原创

评论“js可拖动的后台界面”

更新动态

友情链接

js可拖动的后台界面

js,可拖动,后台界面

js tr控制下面的tbody隐藏和显示

js判断ie方法集锦（含正则）代码短小经典 原创

评论“js可拖动的后台界面”

更新动态

友情链接

js判断ie方法集锦（含正则）代码短小经典原创