js打开支持拖动的弹出层

收藏

js打开一个带有动画效果的弹出层，并且鼠标可拖动，兼容主流浏览器。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

点击按钮和浮动层html代码

<div class="btnbox">
    <a class="od" onClick="show('feedbox');return false;" href="#">[打开层]</a>
    <a class="od" onclick="closeed('feedbox');return false;" href="#">[关闭层]</a>
</div>

<div id="feedbox" style="display:none;">
    <div class="main">移动层</div>
</div>

js拖动弹出层

var prox;
var proy;
var proxc;
var proyc;
function show(id) {
    clearInterval(prox);
    clearInterval(proy);
    clearInterval(proxc);
    clearInterval(proyc);
    var o = document.getElementById(id);
    o.style.display = "block";
    o.style.width = "1px";
    o.style.height = "1px";
    prox = setInterval(function() {
        openx(o, 500)
    }, 10);
}
function openx(o, x) {
    var cx = parseInt(o.style.width);
    if (cx < x) {
        o.style.width = (cx + Math.ceil((x - cx) / 5)) + "px";
    } else {
        clearInterval(prox);
        proy = setInterval(function() {
            openy(o, 200)
        }, 10);
    }
}

function openy(o, y) {
    var cy = parseInt(o.style.height);
    if (cy < y) {
        o.style.height = (cy + Math.ceil((y - cy) / 5)) + "px";
    } else {
        clearInterval(proy);
    }
}

function closeed(id) {
    clearInterval(prox);
    clearInterval(proy);
    clearInterval(proxc);
    clearInterval(proyc);
    var o = document.getElementById(id);
    if (o.style.display == "block") {
        proyc = setInterval(function() {
            closey(o)
        }, 10);
    }
}

function closey(o) {
    var cy = parseInt(o.style.height);
    if (cy > 0) {
        o.style.height = (cy - Math.ceil(cy / 5)) + "px";
    } else {
        clearInterval(proyc);
        proxc = setInterval(function() {
            closex(o)
        }, 10);
    }
}

function closex(o) {
    var cx = parseInt(o.style.width);
    if (cx > 0) {
        o.style.width = (cx - Math.ceil(cx / 5)) + "px";
    } else {
        clearInterval(proxc);
        o.style.display = "none";
    }
}

/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("feedbox");
var dx, dy, mx, my, mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e) {
    var e = e ? e : event;
    if (e.button == (document.all ? 1 : 0)) {
        mouseD = true;
    }
}

document.onmouseup = function() {
    mouseD = false;
    odrag = "";
    if (isIE) {
        od.releaseCapture();
        od.filters.alpha.opacity = 100;
    } else {
        window.releaseEvents(od.MOUSEMOVE);
        od.style.opacity = 1;
    }
}


//function readyMove(e){ 
od.onmousedown = function(e) {
    odrag = this;
    var e = e ? e : event;
    if (e.button == (document.all ? 1 : 0)) {
        mx = e.clientX;
        my = e.clientY;
        od.style.left = od.offsetLeft + "px";
        od.style.top = od.offsetTop + "px";
        if (isIE) {
            od.setCapture();
            od.filters.alpha.opacity = 50;
        } else {
            window.captureEvents(Event.MOUSEMOVE);
            od.style.opacity = 0.5;
        }
    }
}

document.onmousemove = function(e) {
    var e = e ? e : event;
    if (mouseD == true && odrag) {
        var mrx = e.clientX - mx;
        var mry = e.clientY - my;
        od.style.left = parseInt(od.style.left) + mrx + "px";
        od.style.top = parseInt(od.style.top) + mry + "px";
        mx = e.clientX;
        my = e.clientY;
    }
}