js 드래그 가능한 배경 인터페이스_페이지 배경

// ************************ 드래그 ********************** * **********
function setDrag(e){
var drag_flag = true
var start_x = getX(e)
//마스크 추가
createMask( );
                                                                                                                                                                            🎜>        반품(예: x || e.clientX);                        > ;
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.documentlement ||
VAR; DOCHEIGHT = (Rootel.Clientheight & GT; Rootel.Scrollheight)?
rootl.Clientheight: rootl.Scrollheight) " px"
var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth: rootEl.scrollWidth)
"px";
var var
shieldStyle="위치: 절대;top :0px;left:0px;width:" docWidth ";height:" docHeight ";배경:#cccccc ;z-
index:10000;filter:alpha(opacity=0);opacity:0";
var _shield = document.createElement("div");
_shield.id = "shield";
_shield.style.cssText = ShieldStyle;
docu ment.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{                                                                                                                              Child($doc("shield"));
              document.body.removeChild($doc("splitDiv"));                                             나이()

document.onmouseup = function(){
시도{
if(drag_flag){
width)
$doc("leftShow").style.width = $doc("splitDiv").style.left
document.body .removeChild($doc("shield"));
document.body.removeChild ($doc("splitDiv"));
                                                                          drag_flag=false ){}
}

}

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>드래그 가능한 배경 인터페이스_Script Home_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> <div id="topArea" class="topArea"> <div class="logoArea"> </div> <div class="toolbarArea"> </div> </div> <div id="mainContent"> <div id="leftShow" class="f_left leftBg" style="width:180px;height:100%;"> </div> <div class="f_left splitBar" id="dragBar" onmousedown="setDrag(event);"> </div> <div class="content_show" id="center" style="overflow-y:auto;overflow-x:hidden;"> <iframe src="" width="100%" height="100%" frameborder="1"> </iframe> </div> </div> <div id="footer" class="bottomArea" align="center"> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]