jq 给div设置宽_jquery拖拽改变div大小效果

jquery拖拽改变div大小效果 - 建站特效http://51xuediannao.com

*{margin:0;padding:0;}

ul,ol,li{list-style: none;}

#wrap{width:660px;height: 150px;margin:10px auto;position: relative;clear:both;background: #0cc;}

#wrap li{width: 220px;float: left;height: 150px;background: #ccc;overflow: hidden;

text-align: center;line-height: 50px;}

#wrap li.li1{background: #777;}

#wrap li.li2{background: #ccc;}

#wrap li.li3{background: #999;}

#wrap label{float: left;width: 10px;height: 150px;

position: absolute;cursor: e-resize;}

#wrap label.lab1{left: 210px;background: #f00;}

#wrap label.lab2{left: 434px;background:#ff0;}

• 1

• 懒人建站 http://www.51xuediannao.com 整理

2

$(function(){

var clickX, leftOffset, inx, nextW2, nextW;

var dragging = false;

var doc = document;

var labBtn = $("#wrap").find('label');

var wrapWidth = $("#wrap").width();

labBtn.bind('mousedown',function(){

dragging = true;

leftOffset = $("#wrap").offset().left;

inx = $(this).index('label');

}

);

doc.onmousemove = function(e){

if (dragging) {

labBtn.eq(inx).prev().text( labBtn.eq(inx).prev().width() );

labBtn.eq(inx).next().text( labBtn.eq(inx).next().width() );

//--------------------------------------------

clickX = e.pageX;

$("#test").text( '鼠标位置：' + clickX );

//判断第几个拖动按钮

if( inx == 0 ){

//第一个拖动按钮左边不出界

if(clickX > leftOffset) {

labBtn.eq(inx).css('left', clickX - 7 - leftOffset + 'px');//按钮移动

labBtn.eq(inx).prev().width( clickX-leftOffset + 'px');

nextW2 = clickX-leftOffset;

labBtn.eq(inx).next().width( wrapWidth - nextW2 - labBtn.eq(inx+1).next().width() + 'px');

} else {

labBtn.eq(inx).css('left', '0px');

}

if(clickX > (labBtn.eq(inx+1).offset().left-5)) {

//第一个按钮右边不出界

labBtn.eq(inx).css('left', parseFloat(labBtn.eq(inx+1).css('left')) -11 + 'px');

//第一个按钮，左右容器不出界

labBtn.eq(inx).prev().width( labBtn.eq(inx).offset().left + 6 - leftOffset + 11 + 'px' );

labBtn.eq(inx).next().width( '0px' );

}

} else {

//第二个拖动按钮左边不出界

if( (clickX) > labBtn.eq(inx-1).offset().left + 10 ) {

labBtn.eq(inx).css('left', clickX - 7 - leftOffset + 'px'); //按钮移动

labBtn.eq(inx).prev().width( (clickX-leftOffset-labBtn.eq(inx-1).prev().width()) + 'px');

nextW = clickX - leftOffset;

labBtn.eq(inx).next().width( wrapWidth - nextW + 'px');

} else {

//第二个按钮向左移动不出界

labBtn.eq(inx).css('left', parseFloat(labBtn.eq(inx-1).css('left')) +10 + 'px');

//第二个按钮左右容器，不出界

labBtn.eq(inx).prev().width('0px')

labBtn.eq(inx).next().width( wrapWidth - labBtn.eq(inx-1).prev().width() );

}

if( clickX >= (leftOffset + wrapWidth) ) {

//第二个按钮右边不出界

labBtn.eq(inx).css('left', wrapWidth -10 + 'px'); //减去按钮的宽度

//第二个按钮左右容器，右边不出界

labBtn.eq(inx).prev().width( wrapWidth - labBtn.eq(inx-1).prev().width());

labBtn.eq(inx).next().width( '0px' );

}

}

}

};

$(doc).mouseup(function(e) {

dragging = false;

e.cancelBubble = true;

})

})

本代码由懒人建站 收集整理 我要学电脑.COM →www.51xuediannao.com

懒人建站 http://www.51xuediannao.com

我们为您提供-

jquery特效，

JS代码，

网页特效，

CSS技巧；

懒人建站只收录实用和能提高用户体验的代码

我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。

经典语录

运 行