JS遮照层、拖拽效果

转自舞蝶

JS:

var x, y, down = false, obj;
var Top, Left, Width, Height;
var MaxW, MaxH; //页面的最高高度和最宽宽度
function MDown(o, evt) {
    obj = document.getElementById(o); //事件触发对象
    if (!evt) evt = window.event;
    document.all != undefined ? obj.setCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); //设置属于当前对象的鼠标捕捉
    x = (evt.offsetX == undefined ? evt.layerX : evt.offsetX); //获取鼠标指针位置相对于焦点对象的X坐标
    y = (evt.offsetY == undefined ? evt.layerY : evt.offsetY); //获取鼠标指针位置相对于焦点对象的Y坐标
    down = true;         //布尔值，判断鼠标是否已按下，true为按下，false为未按下

    document.onmousemove = function MMove(evt) {
        if (down) {
            if (!evt) evt = window.event;
            var CurrentX = eval(eval(obj.style.left.replace("px", "") == "" ? "0" : obj.style.left.replace("px", "")) - 0 + (evt.offsetX == undefined ? evt.layerX : evt.offsetX) - x); //当前移动层的X坐标
            var CurrentY = eval(eval(obj.style.top.replace("px", "") == "" ? "0" : obj.style.top.replace("px", "")) - 0 + (evt.offsetY == undefined ? evt.layerY : evt.offsetY) - y); //当前移动层的Y坐标
            if (CurrentX > MaxW - 540) CurrentX = MaxW - 540;
            if (CurrentY > MaxH - 320) CurrentY = MaxH - 320;
            if (CurrentX < 0) CurrentX = 0;
            if (CurrentY < 0) CurrentY = 0;
            obj.style.left = CurrentX + "px";
            obj.style.top = CurrentY + "px";
        }
        else {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    };
    document.onmouseup = function MUp() {
        down = false;
        document.all != undefined ? obj.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);  //释放当前对象的鼠标捕捉
        document.onmousemove = null;
        document.onmouseup = null;
    };
}

//弹出回复对话框
function Show_Reply() {
    down = false;
    if (getCookie("UserName", "LoginUser") != undefined && getCookie("ShopId", "LoginUser") != undefined && getCookie("UserType", "LoginUser") != undefined) {
        var fullscreen = document.getElementById("mask")
        MaxW = (document.documentElement.scrollWidth > document.documentElement.clientWidth ? document.documentElement.scrollWidth : document.documentElement.clientWidth);
        MaxH = (document.documentElement.scrollHeight > document.documentElement.clientHeight ? document.documentElement.scrollHeight : document.documentElement.clientHeight);
        fullscreen.style.width = MaxW + "px";
        fullscreen.style.height = MaxH + "px";
        var TopHeight = parseInt(document.documentElement.scrollTop > document.body.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + ((document.documentElement.clientHeight - 250) / 2) - 170;
        fullscreen.style.display = "block";
        var EditDiv = document.getElementById("massage_box");
        EditDiv.style.display = "block";
        EditDiv.style.top = TopHeight + 150 + "px";
        EditDiv.style.left = "300px";
    }
    else {
        if (confirm("对不起，请先登录！确定登录吗？")) {
            location.href = "/FC_User/Login.aspx";
        }
    }
    return false;
}

//点击关闭按钮时触发的操作
function Edit_Close(evt) {
    down = false;
    var fullscreen = document.getElementById("mask");
    fullscreen.style.display = "none";
    var EditDiv = document.getElementById("massage_box");
    EditDiv.style.display = "none";
}
CSS:

#massage_box {
 position:absolute;
    left:0px;
    top:0px;
 width:540px;
 height:330px;
 z-index:210;
 display:none;
}
#mask {
 position:absolute;
 top:0px;
 left:0px;
    width:500px;
    height:500px;
 background-color:#000;
 filter:alpha(opacity=60);
    -moz-opacity:0.6; 
    -khtml-opacity: 0.6; 
    opacity: 0.6;
 z-index:200;
 display:none;
}

 

HTML:

<div id="mask"></div>

<div id="massage_box">
        <div class="massage">
            <div class="header" onmousedown="MDown('massage_box',event)">

　　     </div>

　　 </div>

</div>