您的位置：首页 > Web前端 > JavaScript

js实现拖动改变层的大小（宽度）

2016-11-03 21:34 736 查看

鼠标拖动改变div的宽度变化：

<body>
<div id="div1" style="width: 100px; height: 100px; background: #CCCCCC; position: absolute; left: 500px; top: 200px;">
<div style="width: 10px; height: 100px; background: #DAA520; position: absolute; left: 0; cursor: move;"></div>
<div style="width: 10px; height: 100px; background: #DAA520; position: absolute; right: 0; cursor: move;"></div>
</div>

<script type="text/javascript">
var oDiv=document.getElementById("div1");

oDiv.onmousedown=function(ev){
var ev= ev || event;
var b='';

var disL=oDiv.offsetLeft;
var disW=oDiv.offsetWidth;
var disX=ev.clientX;

if ( disX > disL + disW - 10) {
b='right';
}else if ( disX < disL + 10 ) {
b='left';
}

if (oDiv.setCapture) {
oDiv.setCapture();
}

document.onmousemove=function(ev){
var ev = ev || event;

switch (b){
case 'left':
oDiv.style.width= disW - ( ev.clientX - disX ) + 'px';
oDiv.style.left= disL + ( ev.clientX - disX ) + 'px';
break;
case 'right':
oDiv.style.width= disW + ( ev.clientX - disX ) + 'px';
break;
}
}

document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;

if (oDiv.releaseCapture) {
oDiv.releaseCapture();
}
}

return false;
}
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 鼠标拖动

相关文章推荐

新的分享

章节导航