左右布局，中分线可以左右拖动

cursor有很多形状

在中线附近变为向左 向右鼠标，通过mousemove来实现，要不断地计算。

通过jquery实现，比较简单一些，用原生的js太复杂了。

<!DOCTYPE html>
<html>
  <head>
    <title>bar index</title>
    <style>
  	.con{
    	width:1000px;
    	border:1px solid black;
    	height:100px; 
    }
    .right{
    	width:70%;
    	height:100px; 
    	float:left;
    	background:olive; 
    }
	#keleyi{ 
		float:left;
		width:30%; 
		height:100px; 
		background:#f1f1f1; 
		text-align:center; 
		line-height:16px; 
		cursor: default;
	}	
	</style>
  </head>
  <body>
    <h1>标题</h1>
    <p>内容</p>
    <div class='con'>
    	<div id="keleyi">
    	</div>    	
    	<div class='right' id='right'></div>
    </div>
    <script type="text/javascript" src="js/jquery/jquery-2.1.4.js"></script>
	<script>
		
		$(function () {
			//绑定需要拖拽改变大小的元素对象 
			bindResize(document.getElementById('kel'+'eyi'));
		});

		$('#keleyi').unbind().bind('mousemove', function(e){
			var xPos = e.offsetX;
			var yPos = e.offsetY;

			var offset = 18;

			if(xPos > ($('#keleyi').offset().left+$('#keleyi').width())-offset){
				$(this).css('cursor', 'move');
			}else{
				$(this).css('cursor', 'default');
			}

		});	
		
		function bindResize(el) {
			//初始化参数 
			var els = el.style,
			//鼠标的 X 和 Y 轴坐标 
			x = y = 0;
			//邪恶的食指 
			$(el).mousedown(function (e) {
				//按下元素后，计算当前鼠标与对象计算后的坐标 
				x = e.clientX - el.offsetWidth,
				y = e.clientY - el.offsetHeight;
				//在支持 setCapture 做些东东 
				el.setCapture ? (
				//捕捉焦点 
				el.setCapture(),
				//设置事件 
				el.onmousemove = function (ev) {
				mouseMove(ev || event)
				},
				el.onmouseup = mouseUp
				) : (
				//绑定事件 
				$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
				)
				//防止默认事件发生 
				e.preventDefault()
			});
			//移动事件 
			function mouseMove(e) {
				//宇宙超级无敌运算中... 
				els.width = e.clientX - x + 'px';
				$('#right').width(1000-(+els.width.replace('px', ''))); 
			}
			//停止事件 
			function mouseUp() {
				//在支持 releaseCapture 做些东东 
				el.releaseCapture ? (
				//释放焦点 
				el.releaseCapture(),
				//移除事件 
				el.onmousemove = el.onmouseup = null
				) : (
				//卸载事件 
				$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
				)
			}
		}
	</script>
  </body>
</html>

　　

posted on 2015-10-13 16:40  j.w  阅读(1209)  评论(0)    收藏  举报