图片剪切效果

第一篇博文，把今天写的一个实现图片剪切效果的JS脚本发上来

基本思路：

　　三层结构，第一层为透明度是0.7的图片，第二层为正常的图片，第三层使用一个DIV作为选取框，采用CSS中的绝对定位进行覆盖

HTML代码

<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>

CSS代码

body{
background-color:#333;
}
#box{
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{
200px;
height:200px;
border:1px solid #FFF;
cursor:move;
position:absolute;
top:0;
left:0;
}
.minDiv{
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;
}

JS代码

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

开通这个博客没事写写，主要以前端开发为主，当然也有PHP和扯淡