js拖动:js可拖动的后台界面疯狂代码！

// ************************ 拖动 *********************************
function

Drag(e){
var drag_flag = true;
var begin_x = getX(e);
//添加蒙板
createMask

;
//添加半透明拖动条
createSplitDiv

;
function getX(e){

(window.event) e = window.event;

(e.x || e.clientX);
}
function createSplitDiv

{
//半透明

拖动条
var _top = $doc("topArea").off

Height +"px";
var _left = $doc("dragBar").off

Left +"px";;
var _height = $doc("dragBar").off

Height +"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{

(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;
}

{
$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{

(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){}
}
}

(window.attachEvent){
window.attachEvent("onload",function

{resizePage

;});
window.attachEvent("onresize",function

{resizePage

;});
}

(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; char<img src='/icons/384set.gif' />=utf-8"> 
<title>可拖动<img src='/icons/384de.gif' />后台界面_脚本的家_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; 
} 
.<img src='/icons/384main.gif' />Content{ 
  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>

<br/> 
    [Ctrl+A 全选 提示:你可先修改部分代码,再按运行]<br/>
				<div>                                                                                                                                                                                                                                      </div>
			<div id="entry-tags"><span>Tags:</span> 	<a href='/Tag/70963/Index.html'>js拖动div</a> <a href='/Tag/70962/Index.html'>js拖动效果</a> <a href='/Tag/70961/Index.html'>js拖动图片</a> <a href='/Tag/6529/Index.html'>js拖动</a> </div>
			<script language="javascript">
				showSns();
			</script>			
			<h3 class="related_post_title">延伸阅读</h3>
			<ul class="related_post"> 
			
					<li><span>2010-12-9</span>-- <a href="/Javascript/Article112567.html">jsdrag,一起来写段JS drag拖动代码</a></li>
				
					<li><span>2010-12-9</span>-- <a href="/Javascript/Article112566.html">js拖动,JS拖动技术 关于setCapture使用</a></li>
				
					<li><span>2009-8-16</span>-- <a href="/Javascript/Article64074.html">js拖动:js拖动鼠标写字</a></li>
				
					<li><span>2008-9-5</span>-- <a href="/Javascript/Article4714.html">js拖动:JS+CSS打造可拖动的聊天窗口层</a></li>
				
					<li><span>2008-12-27</span>-- <a href="/Javascript/Article46063.html">div拖动:一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码</a></li>
				
					<li><span>2008-12-25</span>-- <a href="/Javascript/Article45015.html">div拖动:DIV层的拖动、关闭、打开效果代码</a></li>
				
			</ul>							
		</div> 
		</div>
<div class="list-y">
	<ul class="list">
		
	</ul>
</div>

验证码点击图片更换

js拖动:js可拖动的后台界面

赞助商广告

随机更新

热门标注

最近更新

最新标注