19.js

文件是《精通Javascript+jQuery》的书中实例

		
	var fn3Move;
	//左侧中间的小方块
	$("#square3").bind("mousedown",function(e){
		var clickX = e.pageX, clickY = e.pageY;
		DivWidth = parseInt($("#selectArea").width());
		DivHeight = parseInt($("#selectArea").height());
		DivLeft = parseInt($("#selectArea").css("left"));
		DivTop = parseInt($("#selectArea").css("top"));
		$("#picArea").bind("mousemove",fn3Move = function(e){
			var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
			
			if(e.pageX>=offsetX){
				if(DivLeft+moveOffsetX<=0)
					$("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
				else if(moveOffsetX>DivWidth-10)
					$("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
				else
					$("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
			}
			moveNine();
			return false;
		});
		return false;
	});
	$("#square3").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn3Move);
		cropPic();
		return false;
	});
	
	var fn4Move;
	//右边中间的小方块
	$("#square4").bind("mousedown",function(e){
		var clickX = e.pageX, clickY = e.pageY;
		DivWidth = parseInt($("#selectArea").width());
		DivHeight = parseInt($("#selectArea").height());
		DivLeft = parseInt($("#selectArea").css("left"));
		DivTop = parseInt($("#selectArea").css("top"));
		$("#picArea").bind("mousemove",fn4Move = function(e){
			var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
			
			if(e.pageX<=offsetX+parentWidth){
				if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
					$("#selectArea").css({"width":DivWidth+moveOffsetX});
				else if(DivWidth+moveOffsetX<=10)
					$("#selectArea").css({"width":"10px"});
				else
					$("#selectArea").css({"width":DivWidth+moveOffsetX});
			}
			moveNine();
			return false;
		});
		return false;
	});
	$("#square4").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn4Move);
		cropPic();
		return false;
	});
	
	var fn5Move;
	//左下角的小方块
	$("#square5").bind("mousedown",function(e){
		var clickX = e.pageX, clickY = e.pageY;
		DivWidth = parseInt($("#selectArea").width());
		DivHeight = parseInt($("#selectArea").height());
		DivLeft = parseInt($("#selectArea").css("left"));
		DivTop = parseInt($("#selectArea").css("top"));
		$("#picArea").bind("mousemove",fn5Move = function(e){
			var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
			
			if(e.pageX>=offsetX){
				if(DivLeft+moveOffsetX<=0)
					$("#selectArea").css({"left":"0px","width":DivWidth-moveOffsetX});
				else if(moveOffsetX>DivWidth-10)
					$("#selectArea").css({"left":DivLeft+DivWidth-10,"width":"10px"});
				else
					$("#selectArea").css({"left":DivLeft+moveOffsetX,"width":DivWidth-moveOffsetX});
			}
			
			if(e.pageY<=offsetY+parentHeight){
				if(DivTop+DivHeight+moveOffsetY>=parentHeight)
					$("#selectArea").css({"height":DivHeight+moveOffsetY});
				else if(DivHeight+moveOffsetY<10)
					$("#selectArea").css({"height":"10px"});
				else
					$("#selectArea").css({"height":DivHeight+moveOffsetY});
			}		
			moveNine();
			return false;
		});
		return false;
	});
	$("#square5").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn5Move);
		cropPic();
		return false;
	});
	
	var fn6Move;
	//下面中间的小方块
	$("#square6").bind("mousedown",function(e){
		var clickX = e.pageX, clickY = e.pageY;
		DivWidth = parseInt($("#selectArea").width());
		DivHeight = parseInt($("#selectArea").height());
		DivLeft = parseInt($("#selectArea").css("left"));
		DivTop = parseInt($("#selectArea").css("top"));
		$("#picArea").bind("mousemove",fn6Move = function(e){
			var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
			
			if(e.pageY<=offsetY+parentHeight){
				if(DivTop+DivHeight+moveOffsetY>=parentHeight)
					$("#selectArea").css({"height":DivHeight+moveOffsetY});
				else if(DivHeight+moveOffsetY<10)
					$("#selectArea").css({"height":"10px"});
				else
					$("#selectArea").css({"height":DivHeight+moveOffsetY});
			}		
			moveNine();
			return false;
		});
		return false;
	});
	$("#square6").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn6Move);
		cropPic();
		return false;
	});
	
	var fn7Move;
	//右下角的小方块
	$("#square7").bind("mousedown",function(e){
		var clickX = e.pageX, clickY = e.pageY;
		DivWidth = parseInt($("#selectArea").width());
		DivHeight = parseInt($("#selectArea").height());
		DivLeft = parseInt($("#selectArea").css("left"));
		DivTop = parseInt($("#selectArea").css("top"));
		$("#picArea").bind("mousemove",fn7Move = function(e){
			var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
			
			if(e.pageX<=offsetX+parentWidth){
				if(DivLeft+DivWidth+moveOffsetX>=parentWidth)
					$("#selectArea").css({"width":DivWidth+moveOffsetX});
				else if(DivWidth+moveOffsetX<=10)
					$("#selectArea").css({"width":"10px"});
				else
					$("#selectArea").css({"width":DivWidth+moveOffsetX});
			}
			if(e.pageY<=offsetY+parentHeight){
				if(DivTop+DivHeight+moveOffsetY>=parentHeight)
					$("#selectArea").css({"height":DivHeight+moveOffsetY});
				else if(DivHeight+moveOffsetY<10)
					$("#selectArea").css({"height":"10px"});
				else
					$("#selectArea").css({"height":DivHeight+moveOffsetY});
			}		
			moveNine();
			return false;
		});
		return false;
	});
	$("#square7").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn6Move);
		cropPic();
		return false;
	});
	
	//双击选区切割
	$("#selectArea").bind("dblclick",function(e){
		var tempSelectArea = $(this);
		//记录选区的四个点，用于切割
		var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
		var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
		var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
		var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
		//下层图片剪切，final
		$("#mypic2").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
		//背景色变成白色
		$("#picArea").css("backgroundColor","#FFFFFF");
		tempSelectArea.hide();
	});
});

function cropPic(){
	var tempSelectArea = $("#selectArea");
	//记录选区的四个点，用于切割
	var iCropTop = parseInt(tempSelectArea.css("top")) + 1;
	var iCropRight = parseInt(tempSelectArea.css("left")) + parseInt(tempSelectArea.width()) + 1;
	var iCropBottom = parseInt(tempSelectArea.css("top")) + parseInt(tempSelectArea.height()) + 1;
	var iCropLeft = parseInt(tempSelectArea.css("left")) + 1;
	$("#mypic1").css("clip", "rect("+iCropTop+"px,"+iCropRight+"px,"+iCropBottom+"px,"+iCropLeft+"px)");
}

function moveNine(){
	//移动那9个小方块
	var iSelectWidth = parseInt($("#selectArea").width());
	var iSelectHeight = parseInt($("#selectArea").height());
	$("#square0").css({"left":"-1px","top":"-1px"});
	$("#square1").css({"left":iSelectWidth/2-2,"top":"-1px"});
	$("#square2").css({"left":iSelectWidth-4,"top":"-1px"});
	$("#square3").css({"left":"-1px","top":iSelectHeight/2-2});
	$("#square4").css({"left":iSelectWidth-4,"top":iSelectHeight/2-2});
	$("#square5").css({"left":"-1px","top":iSelectHeight-4});
	$("#square6").css({"left":iSelectWidth/2-2,"top":iSelectHeight-4});
	$("#square7").css({"left":iSelectWidth-4,"top":iSelectHeight-4});
	$("#square8").css({"left":iSelectWidth/2-3,"top":iSelectHeight/2-3});
	
	//这个就是给IE用的，制造一个看不见的区域来让IE选择
	$("#squareIE").width(Math.abs(iSelectWidth-8)).height(Math.abs(iSelectHeight-8));
}