19.js

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

$(function(){
	//初始化图片区域
	var myimg = new Image(); 
	myimg.src = $("#mypic2").attr("src"); 
	//输出图片数据
	$("#showSize").html(myimg.width + "×" + myimg.height);
	
	//初始化图片的位置，根据图片的宽度调整左右
	$("#statistics, #picArea").css("left",$(window).width()/2-myimg.width/2);
	$("#picArea").width(myimg.width).height(myimg.height);	
	var parentWidth = parseInt($("#picArea").width());
	var parentHeight = parseInt($("#picArea").height());
	
	//显示鼠标的相对于图片的坐标（左上角为(0,0)）
	var offsetX = parseInt($("#picArea").css("left"));
	var offsetY = parseInt($("#picArea").css("top"));
	$("#mypic").bind("mousemove",function(e){
		$("#xPos").text(e.pageX-offsetX);
		$("#yPos").text(e.pageY-offsetY);
	});
	
	var fnpicAreaDown, fnpicAreaMove, fnpicAreaUp;	//事件的函数名称
	//点击鼠标，出现虚线选区
	$("#picArea").bind("mousedown",fnpicAreaDown = function(e){
		var clickX = e.pageX-offsetX, clickY = e.pageY-offsetY;
		$("#selectArea").show().css({
			"left":clickX,
			"top":clickY,
			"height":"0px",
			"width":"0px"
		});
		//移动鼠标，该选区变大
		$("#picArea").bind("mousemove",fnpicAreaMove = function(e){
			//获取鼠标移动的相对
			var iX = e.pageX-offsetX-clickX;
			var iY = e.pageY-offsetY-clickY;
			//首先判断不能移动出picArea，兼容IE
			if(e.pageX>=offsetX && e.pageX<=offsetX+$(this).width()){
				//其次，允许从下往上拖动
				if(iX>=0)
					$("#selectArea").css("width",iX);
				else
					$("#selectArea").css({"width":-iX,"left":e.pageX-offsetX});
			}
			if(e.pageY>=offsetY && e.pageY<=offsetY+$(this).height()){
				if(iY>=0)
					$("#selectArea").css("height",iY);
				else
					$("#selectArea").css({"height":-iY,"top":e.pageY-offsetY});
			}
			moveNine();	//移动9个小方块
			return false;	//阻止浏览器的默认事件
		});
		return false;	//阻止浏览器的默认事件
	});
	//松开鼠标，删除出现选区的相关事件
	$("#picArea").bind("mouseup",fnpicAreaUp = function(e){
		$("#picArea").unbind("mousedown",fnpicAreaDown);
		$("#picArea").unbind("mousemove",fnpicAreaMove);
		cropPic();	//剪切上层图片，实现四周阴影的效果
		$("#picArea").unbind("mouseup",fnpicAreaUp);
		return false;
	});
	
	var DivWidth, DivHeight, DivLeft, DivTop;	//选区的宽、高、左位置、上位置
	
	var fnselectDown,fnselectMove;
	//点击移动选区，不能移出图片本身
	$("#selectArea").bind("mousedown",fnselectDown = 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",fnselectMove = function(e){
			var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
			
			//水平方向不能移动出去
			if(DivLeft+DivWidth+moveOffsetX>=parentWidth-2)
				$("#selectArea").css({"left":parentWidth-DivWidth-2});
			else if(DivLeft+moveOffsetX<0)
				$("#selectArea").css({"left":"0px"});
			else
				$("#selectArea").css({"left":DivLeft+moveOffsetX});
			
			//竖直方向也不能移动出去
			if(DivTop+DivHeight+moveOffsetY>=parentHeight-2)
				$("#selectArea").css({"top":parentHeight-DivHeight-2});
			else if(DivTop+moveOffsetY<0)
				$("#selectArea").css({"top":"0px"});
			else
				$("#selectArea").css({"top":DivTop+moveOffsetY});
			return false;
		});
		return false;
	});
	$("#selectArea").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fnselectMove);
		cropPic();
		return false;
	});
	
	var fn0Move;
	//左上角的小方块
	$("#square0").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",fn0Move = 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){
				if(DivTop+moveOffsetY<=0)
					$("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
				else if(moveOffsetY>DivHeight-10)
					$("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
				else
					$("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
			}		
			moveNine();	//同时移动其它方块
			return false;
		});
		return false;
	});
	$("#square0").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn0Move);
		cropPic();	//重新剪切图片
		return false;
	});
	
	var fn1Move;
	//上面中间的小方块
	$("#square1").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",fn1Move = function(e){
			var moveOffsetX = e.pageX - clickX, moveOffsetY = e.pageY - clickY;
			
			if(e.pageY>=offsetY){
				if(DivTop+moveOffsetY<=0)
					$("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
				else if(moveOffsetY>DivHeight-10)
					$("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
				else
					$("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
			}		
			moveNine();
			return false;
		});
		return false;
	});
	$("#square1").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn1Move);
		cropPic();
		return false;
	});
	
	var fn2Move;
	//右上角的小方块
	$("#square2").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",fn2Move = 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){
				if(DivTop+moveOffsetY<=0)
					$("#selectArea").css({"top":"0px","height":DivHeight-moveOffsetY});
				else if(moveOffsetY>DivHeight-10)
					$("#selectArea").css({"top":DivTop+DivHeight-10,"height":"10px"});
				else
					$("#selectArea").css({"top":DivTop+moveOffsetY,"height":DivHeight-moveOffsetY});
			}		
			moveNine();
			return false;
		});
		return false;
	});
	$("#square2").bind("mouseup",function(e){
		$("#picArea").unbind("mousemove",fn2Move);
		cropPic();
		return false;
	});