时间:2021-05-26
//************************拖动*********************************
functionsetDrag(e){
vardrag_flag=true;
varbegin_x=getX(e);
//添加蒙板
createMask();
//添加半透明拖动条
createSplitDiv();
functiongetX(e){
if(window.event)e=window.event;
return(e.x||e.clientX);
}
functioncreateSplitDiv(){
//半透明的拖动条
var_top=$doc("topArea").offsetHeight+"px";
var_left=$doc("dragBar").offsetLeft+"px";;
var_height=$doc("dragBar").offsetHeight+"px";;
varsplitDivCss="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);
}
functioncreateMask(){
try{
//创建背景
varrootEl=document.documentElement||document.body;
vardocHeight=((rootEl.clientHeight>rootEl.scrollHeight)?
rootEl.clientHeight:rootEl.scrollHeight)+"px";
vardocWidth=((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){
varnow_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需再刷新一下页面才能执行]
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS+CSS打造的可拖动的弹出提示框a{color:
本文实例讲述了JS实现可缩放、拖动、关闭和最小化的浮动窗口方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS实现可缩放、拖动、关闭和最小化的浮
基于mithril.js,javascript,scss写一个可拖动的滑块组件,供大家参考,具体内容如下问题描述:需求需要实现一个可拖动的滑块组件,但是又不能用
在制作商城类微信小程序的过程中,我们经常会碰到需要增加可拖动悬浮图标的情况,本文简单的介绍一下可拖动悬浮按钮的实现。运行截图:主要代码:js:varstartP
本文实例讲述了JS拖动鼠标画出方框实现鼠标选区的方法。分享给大家供大家参考。具体如下:相当实用的一个JS技巧,拖动鼠标可画出一个方框,可作为一个选区的功能,可以