<div id="box">        <img id="img-1"  src="imgs/cat-1.jpg"/>        <img id="img-2" src="imgs/cat-2.jpg"/>        <div id="main">            <div class="minDiv left-top" id="leftTop"></div>            <div class="minDiv top" id="top"></div>            <div class="minDiv right-top" id="rightTop"></div>            <div class="minDiv right" id="right"></div>            <div class="minDiv right-bottom" id="rightBottom"></div>            <div class="minDiv bottom" id="bottom"></div>            <div class="minDiv left-bottom" id="leftBottom"></div>            <div class="minDiv left" id="left"></div>        </div>
 </div>

body{background-color:#333;}#box{width:522px;height:595px;margin:5px auto;position:relative;}#img-1{position:absolute;left:0;top:0;opacity:0.7;}#img-2{position:absolute;top:0;left:0;clip:rect(0 200px 200px 0);}#main{width:200px;height:200px;border:1px solid #FFF;cursor:move;position:absolute;top:0;left:0;}.minDiv{width:8px;height:8px;background-color:#996633;position:absolute;}.left-top{top:-4px;left:-4px;cursor:nw-resize;}.top{top:-4px;left:50%;margin-left:-4px;cursor:n-resize;}.right-top{top:-4px;right:-4px;cursor:ne-resize;}.right{top:50%;margin-top:-4px;right:-4px;cursor:e-resize;}.right-bottom{bottom:-4px;right:-4px;cursor:se-resize;}.bottom{bottom:-4px;left:50%;margin-left:-4px;cursor:s-resize;}.left-bottom{bottom:-4px;left:-4px;cursor:sw-resize;}.left{left:-4px;top:50%;margin-top:-4px;cursor:w-resize;}

	function $(id){										//通过id获取元素		return document.getElementById(id);	}	function getPosition(node){					//获取元素距离视窗的left和top值		var left=node.offsetLeft;		var top=node.offsetTop;		var parent=node.offsetParent;			//获取元素的父元素		while(parent!=null){			left+=parent.offsetLeft;			top+=parent.offsetTop;			parent=parent.offsetParent;		}		return  {"left":left,"top":top};			//采用对象的形式返回元素距离视窗的left和top值	}	function setChoice(mainDiv){		//	设置选中区域高亮		var top=mainDiv.offsetTop;		var right=mainDiv.offsetLeft+mainDiv.offsetWidth;		var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;		var left=mainDiv.offsetLeft;		var img_2=$("img-2");		img_2.style.clip="rect("+top+"px "+right+"px "+bottom+"px "+left+"px)"	}		window.onload=function( ){		document.onselectstart=function(){return false;} //禁止图片被选中		var  mainDiv=$("main");		var boxDiv=$("box");//获取id为box的元素		var boxLeft=getPosition(boxDiv).left;//获取id为box的元素距离视窗左边的距离		var boxTop=getPosition(boxDiv).top;//获取id为box的元素距离视窗顶部的距离		//获取id为box的元素的宽度和高度		var boxWidth=boxDiv.offsetWidth;		var boxHeight=boxDiv.offsetHeight;		var initialX,initialY,moveOffsetX,moveOffsetY;		var ifMouseDown=false;		var  contact="";		//选取框变化相关代码用函数封装		function upMove(event){		//	选取框向上变化			var y=event.clientY;			//判断鼠标的clientY是否在box元素上面			if( y>boxTop ){				var mainY=getPosition(mainDiv).top;				var addHeight=mainY-y;				var heightBefore=mainDiv.offsetHeight-2;				mainDiv.style.height=heightBefore+addHeight+"px";				main.style.top=main.offsetTop-addHeight+"px";			}		}		function  rightMove(event){		//	选取框向右变化			//clientX,clientY分别获取鼠标距离视窗的x,y坐标			var x=event.clientX;			//判断clientX是否在box元素的右边			if( x<boxLeft+boxWidth ){				var widthBefore=mainDiv.offsetWidth-2; 		//	获取元素原先的宽度，注意offsetWidth会包含边框				var addWidth=x-getPosition(mainDiv).left-widthBefore;				console.log(addWidth);				mainDiv.style.width=widthBefore+addWidth+"px";			}		}		function  downMove(event){		//	选取框向下变化			var y=event.clientY;			//判断clientY是否在box元素的下面			if( y<boxTop+boxHeight ){				var mainY=getPosition(mainDiv).top;				var heightBefore=mainDiv.offsetHeight-2;				var addHeight=y-heightBefore-mainY;				mainDiv.style.height=heightBefore+addHeight+"px";			}		}		function  leftMove(event){			var x=event.clientX;			//判断clientX是否在box元素的左边			if( x>boxLeft ){				var mainX=getPosition(mainDiv).left;				var addWidth=mainX-x;				var widthBefore=mainDiv.offsetWidth-2;				mainDiv.style.width=widthBefore+addWidth+"px";				mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";		    }		}		//mainDiv元素移动的函数		function Move(event){			var moveX=0;			var moveY=0;			var moveX=event.clientX-initialX;			var moveY=event.clientY-initialY;			if( ifMouseDown ){					moveX=event.clientX-moveOffsetX;					moveY=event.clientY-moveOffsetY;					console.log(moveX);					if( mainDiv.offsetLeft+moveX>0&&mainDiv.offsetWidth+moveX<boxDiv.offsetWidth){						mainDiv.style.left=moveX+"px";					}					if( mainDiv.offsetTop+moveY>0&&mainDiv.offsetHeight+moveY<boxDiv.offsetHeight){						mainDiv.style.top=moveY+"px";					}			}		}		//鼠标在8个触点上面的按下事件		var arr_minDiv=mainDiv.getElementsByTagName("div");//获取所有的minDiv元素		var length=arr_minDiv.length;		for(var i=0;i<length;i++){			arr_minDiv[i].onmousedown=function(event){				event.stopPropagation();				ifMouseDown=true;				contact=this.id+"_minDiv";			}		}		//鼠标在mainDiv上面的按下事件		mainDiv.onmousedown=function(event){			initialX=event.clientX;//获取鼠标按下时的横坐标			initialY=event.clientY;//获取鼠标按下时的纵坐标			moveOffsetX=initialX-mainDiv.offsetLeft;		    moveOffsetY=initialY-mainDiv.offsetTop;			ifMouseDown=true;			contact="mainDiv";		}		//鼠标松开事件		window.onmouseup=function(){			ifMouseDown=false;		}		//鼠标移动事件		window.onmousemove=function( event){			//console.log(ifMouseDown);			if( ifMouseDown){				//采用switch代替多层if else				switch(contact){					case "right_minDiv":						rightMove(event);						break;					case "top_minDiv":						upMove(event);						break;					case "left_minDiv":						leftMove(event);						break;					case "bottom_minDiv":						downMove(event);						break;					case "leftTop_minDiv":						leftMove(event);						upMove(event);						break;					case  "rightTop_minDiv":						rightMove(event);						upMove(event);						break;					case "rightBottom_minDiv":						rightMove(event);						downMove(event);						break;					case "leftBottom_minDiv":						leftMove(event);						downMove(event);						break;					//设置mainDiv的移动方式					case "mainDiv":						Move(event);						break;				}				setChoice(mainDiv);			}		}	}