当前位置：懒人建站 > jquery插件 > jquery拖拽改变div大小效果

jquery拖拽改变div大小效果

作者：佳明妈来源：站长素材 2014-01-28 人气：

jquery拖拽改变div大小效果，有需要这个jquery效果的童鞋可以借鉴参考。对这个jquery拖拽来改变div大小的效果可以自己封装成jquery插件，方便和使用和与别人共享。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery拖拽改变div大小效果 - 建站特效http://51xuediannao.com</title>
<meta name="keywords" content="jquery拖拽,改变大小" />
<meta name="description" content="jquery拖拽改变div大小效果" />

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;
	})
})
</script>

<div style="height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站</a> 收集整理 我要学电脑.COM →www.51xuediannao.com </span><br>
<a href="http://www.51xuediannao.com">懒人建站</a> http://www.51xuediannao.com<br/>
<span>我们为您提供-
<a href="http://www.51xuediannao.com">jquery特效</a>，
<a href="http://www.51xuediannao.com/JS">JS代码</a>，
<a href="http://www.51xuediannao.com/JS/texiao">网页特效</a>，
<a href="http://www.51xuediannao.com/jiqiao/css/">CSS技巧</a>；</span>
<span>懒人建站只收录实用和能提高用户体验的代码</span>
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
<p><a href="http://www.lrjz100.com">经典语录</a></p>
</div>
</body>
</html>

jquery拖拽改变div大小效果，有需要这个jquery效果的童鞋可以借鉴参考。
对这个jquery拖拽来改变div大小的效果可以自己封装成jquery插件，方便和使用和与别人共享。

↓ 查看全文

本文链接：jquery拖拽改变div大小效果https://www.51xuediannao.com/js/jquery/757.html

jquery拖拽改变div大小效果由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：jquery积分提示效果插件
下一篇：懒人返回顶部jquery插件//带二维码生成当前页

jquery拖拽改变div大小效果

jquery拖拽改变div大小效果-最新评论

jquery插件-热门文章

jquery插件-推荐文章

活跃用户

jquery拖拽改变div大小效果

jquery拖拽改变div大小效果-相关文章

jquery拖拽改变div大小效果-最新评论

jquery插件-热门文章

jquery插件-推荐文章

活跃用户