js可拖动的后台界面

2024-05-06 14:17:28

字体：大中小

来源：转载

供稿：网友

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

上一篇：js常用函数2008-8-16整理第1/2页

下一篇：收藏，对比功能的JS部分实现代码