js可拖動的后臺界面

2019-11-21 01:40:38

字體：大中小

來源：轉載

供稿：網友

// ************************ 拖動 *********************************
    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>可拖動的后臺界面_武林網_VeVB.COm</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> <script type="text/javascript">   function $doc(ele){     if(typeof ele == "string" || ele instanceof String){          return document.getElementById(ele);         }     return ele; }     //設置頁面布局 function resizePage(){     var topArea = $doc("topArea");     var mainContent = $doc("mainContent");     var footer = $doc("footer");     var myHeight = document.body.clientHeight - (topArea.offsetHeight + footer.offsetHeight);     if(myHeight <= 0) myHeight = 10;     mainContent.style.height = myHeight + "px";          var center = $doc("center");     if(!document.all){         myHeight = myHeight ;//- 10;     }     center.style.height = myHeight + "px";          var leftShow = $doc("leftShow");     var myWidth = document.body.clientWidth - leftShow.offsetWidth - 6;     /*if(!document.all){          myWidth = myWidth - 5     }*/     myWidth = myWidth - 5     center.style.width = myWidth + "px"; } // ************************ 拖動 *********************************     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);   }        </script> </head> <body> <div   class="iwvjtn8m0"   id="topArea" class="topArea">     <div   id="iwvjtn8m0"   class="logoArea"> </div>     <div   id="iwvjtn8m0"   class="toolbarArea"> </div> </div> <div   class="iwvjtn8m0"   id="mainContent">     <div   class="iwvjtn8m0"   id="leftShow" class="f_left leftBg" style="width:180px;height:100%;"></div>     <div   id="iwvjtn8m0"   class="f_left splitBar" id="dragBar" onmousedown = "setDrag(event);"></div>         <div   id="iwvjtn8m0"   class="content_show" id="center" style="overflow-y:auto;overflow-x:hidden;">         <iframe src="" width="100%" height="100%" frameborder="1"></iframe>     </div> </div> <div   class="iwvjtn8m0"   id="footer" class="bottomArea" align="center">      </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：js tr控制下面的tbody隱藏和顯示

下一篇：js判斷ie方法集錦（含正則）代碼短小經典原創