繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js可拖动的后台界面
- Javascript
- form中限制文本字节数js代码
- use jscript with List Proxy Server Information
- use jscript List Installed Software
- List Installed Software Features
- List Information About the Binary Files Used by an Application
- List the Codec Files on a Computer
- List the UTC Time on a Computer
- List Installed Hot Fixes
- excel操作之Add Data to a Spreadsheet Cell
- Add Formatted Data to a Spreadsheet
- Apply an AutoFormat to an Excel Spreadsheet
- JavaScript语法着色引擎（demo及打包文件下载）
- 类之Prototype.js学习
- 一款JavaScript压缩工具：X2JSCompactor
- iis6+javascript Add an Extension File
- jscript之Open an Excel Spreadsheet
- jscript之Read an Excel Spreadsheet
- jscript之List Excel Color Values
- 去除图像或链接黑眼圈的两种方法总结
- Add a Formatted Table to a Word Document
Javascript 中的 js可拖动的后台界面
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 353 ::
收藏到网摘: n/a
不错的后台界面，方便大家以后做后台 // ************************ 拖动 *********************************
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);
}
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
