// ************************ 拖动 ********************************* 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); } 可拖动的后台界面_脚本之家_jb51.net *{ 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; }     [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JavaScript数组问题解决的多种方法

a1=['020','021',..........'025',..........]; a2=['上海','天津',..........'南京',..........]; length一样长,并且一一对应,怎么得到a1里面025对应的a2的南京? 自己想了个办法,但是用到了很多eval还有循环,感觉>>>详细阅读

本文标题：js可拖动的后台界面

地址：http://www.17bianji.com/kaifa2/JS/29527.html

 1/2    1