当前位置：移动技术网 > IT编程>开发语言>JavaScript > js可拖动的后台界面

js可拖动的后台界面

2019年07月31日 | 移动技术网IT编程 | 我要评论

// ************************ 拖动 *********************************
    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);
  }

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>可拖动的后台界面_移动技术网_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; 
} 
.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; 
}     
</style> 
 
</head>

<body>

</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

javascript实现图片轮换动作方法

图片轮换是一种相当复杂的技术，早些年基本用flash实现。这里有一个，教大家如何用flash实现它的。之所以用flash，是因为flash是基于帧的，这与图片轮... [阅读全文]
基于javascript的无缝滚动动画实现2

以更少的代码实现相同的效果应该是我们写程序的究极目标，当然可读性不能丢。在最后一个运行框，我已经做了这样的探索。不过换汤不换药，还是来来回回在scrolltop... [阅读全文]
浅谈javascript如何获取文件后缀名

在上传文件时，常常要对文件的类型即对文件的后缀名进行判断，用javascript可以很容易的做到这一点。用javascript解析一个带绝对路径的文件名并得到后... [阅读全文]
使用JavaScript和MQTT开发物联网应用示例解析

如果说java和c#哪个是最好的开发语言，无疑会挑起程序员之间的相互怒怼，那如果说javascript是动态性最好的语言，相信大家都不会有太大的争议。随着越来越... [阅读全文]
JavaScript代码模拟鼠标自动点击事件示例

利用javascript代码可以帮助我们实现鼠标的自动点击事件。比如点击了按钮1以后，javascript代码会自动去点击下一个按钮，一直点击到按钮5才会停止（... [阅读全文]
javascript解析json格式的数据方法详解

json （javascript object notation）是一种简单的数据格式，比xml更轻巧。它是 javascript 原生格式，这意味着在 ja... [阅读全文]
javascript前端和后台进行数据交互方法示例

在开发中遇到了在没有jquery的情况下需要与后台进行部分数据的交互，查找了部分资料使用javascript实现了操作，记录一下。//获取xmlhttprequ... [阅读全文]
使用纯前端JavaScript实现Excel导入导出方法过程详解

公司最近要为某国企做一个**统计和管理系统，具体要求包含excel导入导出根据导入的数据进行展示报表图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果... [阅读全文]
微信小程序完美解决scroll-view高度自适应问题的方法

第一种情况，scroll-view占据整屏scroll-view { height: 100vh;}第二种情况，scroll-view自适应页面剩余高度xml文... [阅读全文]
js利用iframe实现选项卡效果

本文实例为大家分享了js利用iframe实现选项卡的具体代码，供大家参考，具体内容如下<!doctype html><html> <... [阅读全文]

网友评论


验证码：

js可拖动的后台界面

2019年07月31日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论