div的拉伸

Html

Css

* {
	padding:0;
	margin:0;
}
body {
	padding:100px;
}
#box {
	position:absolute;
	width:150px;
	height:150px;
	background:orangered;
	border:10px solid lightcoral;
}

var oBox = document.getElementById('box');
oBox.onmousedown = function(e) {
    e = e || event;
    var x = e.clientX;
    var y = e.clientY;
    var oBoxL = oBox.offsetLeft;
    var oBoxT = oBox.offsetTop;
    var oBoxW = oBox.offsetWidth;
    var oBoxH = oBox.offsetHeight;

var d = 0;
    if (x < oBoxL + 10) {
        d = 'left';
    } else if (x > oBoxL + oBoxW - 10) {
        d = 'right';
    }

if (y < oBoxT + 10) {
        d = 'top';
    } else if (d < oBoxT + oBoxH - 10) {
        d = 'bottom';
    }
    if (x < oBoxL + 10 && y < oBoxT + 10) {
        d = 'LT';
    }
    document.onmousemove = function(e) {
        e = e || event;
        var xx = e.clientX;
        var yy = e.clientY;
        if (d == 'left') {
            oBox.style.width = oBoxW + x - xx + 'px'
            oBox.style.left = xx + 'px';
        } else if (d == 'right') {
            oBox.style.width = oBoxW + xx - x + 'px'
        }

if (d == 'top') {
            oBox.style.height = oBoxH + y - yy + 'px';
            oBox.style.top = yy + 'px';
        } else if (d == 'bottom') {
            oBox.style.height = oBoxH + yy - y + 'px';
        }
        if (d == 'LT') {
            oBox.style.width = oBoxW + x - xx + 'px'
            oBox.style.left = xx + 'px';
            oBox.style.height = oBoxH + y - yy + 'px';
            oBox.style.top = yy + 'px';
        }
        return false;
    }
    document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
    }
    if (e.preventDefault) {
        e.preventDefault();
    }
}

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

立即下载

div的拉伸



代码描述：div可随意拖动

用鼠标拖拽上下左右的边框即可实现div的拉伸

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

谈笑风生

相关代码

div的拉伸

最新