jQuery弹出窗口可移动、缩放

Html

Css



    
        窗口名称
        鼠标按住可移动窗口
        鼠标按住窗口黑色部分移动可改变窗口大小
        x
    
    
        内容区域 
 内容区域 
 内容区域 
 内容区域 
内容区域

.tanchu_kuang {
	width:70%;
	height:70%;
	min-width:480px!important;
	min-height:200px!important; 
	position:fixed;
	z-index:9999;
	top:15%;
	left:15%;
	background:#fff;
	border:5px solid rgba(0,0,0,1);
	border-radius:10px;
	box-shadow:-1px 0 10px rgba(25,118,210,.2),/*左边阴影*/  
    1px 0 10px rgba(25,118,210,.2),/*右边阴影*/  
    0 -1px 10px rgba(25,118,210,.2),/*顶部阴影*/  
    0 1px 10px rgba(25,118,210,.2);
	overflow-y:auto;
	overflow-x:hidden;
}
.kuang_title_box:hover {
	cursor:move;
}
.kuang_title_box {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:32px;
	border-bottom:1px solid #e6e6e6;
	z-index:100;
	background:#fff;
}
.kuang_title_box span {
	line-height:32px;
	padding-left:20px;
	display:inline-block;
}
.kuang_title_box a {
	display:block;
	width:32px;
	height:32px;
	line-height:32px;
	text-align:center;
	color:#333;
	float:right;
	text-decoration:none;
}
.kuang_title_box a:hover {
	background:#e6e6e6;
}
.kuang_contant {
	width:100%;
	height:90%;
	padding:40px 20px 0 20px;
	position:relative;
	overflow-y:auto;
}
.tanchu_kuang:before {
	content:'';
	width:100px;
	height:100px;
	background:red;
}

$(function() {
    $(".tanchu_kuang").hide();
    $("#tanchu_btn").click(function() {
        $(".tanchu_kuang").fadeIn(300);
        $("#close_x").click(function() {
            $(".tanchu_kuang").fadeOut(200);
        });
    });
});

//窗口移动
$(".kuang_title_box").mousedown(function(event) {
    var isMove = true;
    var abs_x = event.pageX - $('div.tanchu_kuang').offset().left;
    var abs_y = event.pageY - $('div.tanchu_kuang').offset().top;
    $(document).mousemove(function(event) {
        if (isMove) {
            var obj = $('div.tanchu_kuang');
            var left_x = event.pageX - abs_x;
            var top_y = event.pageY - abs_y;
            obj.css({
                'left': left_x,
                'top': top_y
            });
        }
    }).mouseup(function() {
        isMove = false;
    });
});

//窗口缩放
var oDiv = document.getElementById('tanchu_kuang');
oDiv.onmousedown = function(ev) {
    // 获取event对象，兼容性写法
    var ev = ev || event;
    // 鼠标按下时的位置
    var mouseDownX = ev.clientX;
    var mouseDownY = ev.clientY;
    // 方块上下左右四个边的位置和方块的长宽
    var T0 = this.offsetTop;
    var B0 = this.offsetTop + this.offsetHeight;
    var L0 = this.offsetLeft;
    var R0 = this.offsetLeft + this.offsetWidth;
    var W = this.offsetWidth;
    var H = this.offsetHeight;
    // 设置方块的识别范围
    var areaT = T0 + 10;
    var areaB = B0 - 10;
    var areaL = L0 + 10;
    var areaR = R0 - 10;
    // 判断改变方块的大小的方向
    // 左
    var changeL = mouseDownX < areaL;
    // 右
    var changeR = mouseDownX > areaR;
    // 上
    var changeT = mouseDownY < areaT;
    // 下
    var changeB = mouseDownY > areaB;
    // IE8 取消默认行为-设置全局捕获
    if (oDiv.setCapture) {
        oDiv.setCapture();
    }
    document.onmousemove = function(ev) {
        var ev = ev || event;
        // 鼠标移动时的鼠标位置
        var mouseMoveX = ev.clientX;
        var mouseMoveY = ev.clientY;
        //根据改变方块大小的方向不同进行大小的改变
        // 左
        if (changeL) {
            oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
            oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
        }
        // 右
        if (changeR) {
            oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
        }
        // 上
        if (changeT) {
            oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
            oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
        }
        // 下
        if (changeB) {
            oDiv.style.height = (mouseMoveY - mouseDownY) + H + 'px';
        }
        // 限定范围
        if (parseInt(oDiv.style.width) < 50) {
            oDiv.style.width = 50 + 'px';
        }
        if (parseInt(oDiv.style.height) < 50) {
            oDiv.style.height = 50 + 'px';
        }
    }
    document.onmouseup = function() {
        document.onmousemove = null;
        // 释放全局捕获
        if (oDiv.releaseCapture) {
            oDiv.releaseCapture();
        }
    }
    return false;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery弹出窗口可移动、缩放



代码描述：jQuery可移动可缩放弹出窗口

4

最新

发表评论全部评论

暂时没有评论！

我娘她儿子最帅0

2017/11/1 16:17:32

var L = e.clientX - disX; var T = e.clientY - disY; if (L < 0) { L = 0; } else if (L > document.documentElement.clientWidth - obj.offsetWidth) { L = document.documentElement.clientWidth - obj.offsetWidth; } if (T < 0) { T = 0; } else if (T > document.documentElement.clientHeight - obj.offsetHeight) { T = document.documentElement.clientHeight - obj.offsetHeight; }
回复

つ小白┿0

2017/10/26 13:53:49

效果还不完善，还有很多bug ，请谅解。抽空我会完善一下回复

小惧0

2017/10/13 14:41:28

不好意思,其实我只是想试试评论功能>不过既然已经评论出去了,那我就问问前辈:当拖动时,鼠标移出浏览器区域松开鼠标,在进入时事件还在,该怎么破回复

小惧0

2017/10/13 14:37:39

不规范
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

つ小白┿

相关代码

jQuery弹出窗口可移动、缩放

最新