Heim > Artikel > Web-Frontend > js可拖动的后台界面_页面背景

js可拖动的后台界面_页面背景

WBOYOriginal: 2016-05-16 19:02:191057Durchsuche

// ************************ 拖动 *********************************
    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);
  }

.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 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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js添加删除行和双击变文本框的脚本_javascript技巧Nächster Artikel：兼容firefox的给每一个onClick再附加一个事件_javascript技巧

In Verbindung stehende Artikel

Mehr sehen