js可拖動(dòng)的后臺(tái)界面
更新時(shí)間:2008年07月29日 10:07:10 作者:
不錯(cuò)的后臺(tái)界面,方便大家以后做后臺(tái)
// ************************ 拖動(dòng) *********************************
function setDrag(e){
var drag_flag = true;
var begin_x = getX(e);
//添加蒙板
createMask();
//添加半透明拖動(dòng)條
createSplitDiv();
function getX(e){
if(window.event) e = window.event;
return (e.x || e.clientX);
}
function createSplitDiv(){
//半透明的拖動(dòng)條
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{
//創(chuàng)建背景
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){}
}
//拖動(dòng)時(shí)執(zhí)行的函數(shù)
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"));
// 調(diào)整頁面布局
resizePage();
}
}catch(e){}
}
document.onmouseup = function(){
try{
if(drag_flag){
//設(shè)定拖動(dòng)條的位置(設(shè)定左側(cè)的寬度)
$doc("leftShow").style.width = $doc("splitDiv").style.left;
document.body.removeChild($doc("shield"));
document.body.removeChild($doc("splitDiv"));
// 調(diào)整頁面布局
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 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
function setDrag(e){
var drag_flag = true;
var begin_x = getX(e);
//添加蒙板
createMask();
//添加半透明拖動(dòng)條
createSplitDiv();
function getX(e){
if(window.event) e = window.event;
return (e.x || e.clientX);
}
function createSplitDiv(){
//半透明的拖動(dòng)條
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{
//創(chuàng)建背景
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){}
}
//拖動(dòng)時(shí)執(zhí)行的函數(shù)
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"));
// 調(diào)整頁面布局
resizePage();
}
}catch(e){}
}
document.onmouseup = function(){
try{
if(drag_flag){
//設(shè)定拖動(dòng)條的位置(設(shè)定左側(cè)的寬度)
$doc("leftShow").style.width = $doc("splitDiv").style.left;
document.body.removeChild($doc("shield"));
document.body.removeChild($doc("splitDiv"));
// 調(diào)整頁面布局
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 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JavaScript實(shí)現(xiàn)漸變色效果(不使用圖片)
JavaScript漸變色,不使用圖片實(shí)現(xiàn)漸變色,這樣有利的節(jié)省了時(shí)間省去使用圖片的麻煩,而且占用資源極小,漸變色也均勻漂亮,我看了都目瞪口呆,非常值得學(xué)習(xí)哦,接下來為您詳細(xì)介紹2012-12-12div scroll始終在最底部的實(shí)現(xiàn)代碼
想要設(shè)定一個(gè)div始終scroll到它的最底部,可以用如下代碼2009-03-03百度 popup.js 完美修正版非常的不錯(cuò) 腳本之家推薦
百度空間的彈出窗口和拖拽效果(也就是popup.js),看起來挺不錯(cuò)的,用起來也相當(dāng)好,如上圖所示。現(xiàn)在很多知名網(wǎng)站都是用的這樣的技術(shù),建議大家都收藏起來,以備以后使用。2009-04-04JS 網(wǎng)頁安全色調(diào)色板 DW風(fēng)格
利用JS做的一個(gè)網(wǎng)頁安全色調(diào)色板 希望大家用得上!2008-12-12使用canvas制作炫酷黑客帝國數(shù)字雨背景html+css+js
這篇文章主要介紹了使用canvas制作炫酷黑客帝國數(shù)字雨背景,html+css+js黑客帝國電影中的數(shù)字雨,非常簡單,一起來看看如何制作吧2023-03-03圖片與JavaScript配合做出個(gè)性滾動(dòng)條
如果你想定制出一個(gè)漂亮的滾動(dòng)條的話,這個(gè)JS特效可能會(huì)適合你,不過代碼稍嫌麻煩些,但效果真的不錯(cuò),代碼含有中文注釋,學(xué)習(xí)也是不錯(cuò)的,希望朋友們喜歡.2009-10-10