java4.txt

JavaScript 图片切割效果（带拖放、缩放效果）（备注：自己复制就可以使用）

<div class="post">
<div class="postcontent">
<p>&nbsp;</p>
<p>简单说明一下：</p>

<p>技术要点主要有层的拖动，层的缩放还有就是切割效果，预览效果。</p>
<p>总算做到了预期的效果，虽然还有很多不完善的地方，也有些功能没做出来（例如按比例缩放），</p>
<p>但也达到了最初的目的，就是在编程的过程中认识了很多以前不懂或不了解的东西。</p>
<p>程序暂时结束，说明文档稍后再写吧。</p>
<p>&nbsp;</p>
<p>效果：</p>
<style type="text/css">
.resize {
	font-size: 0;
	position: absolute;
	background: #F00;
	width: 5px;
	height: 5px;
	z-index: 500;
}
</style>
<table cellspacing="0" cellpadding="0" width="650" border="0">
  <tr>
    <td width="450">

    <div id="bgDiv" style="width: 300px; height: 400px">
    <div id="dragDiv"
      style="border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid">
    <div class="resize" id="rRightDown" style="right: 0px; bottom: 0px"></div>
    <div class="resize" id="rLeftDown" style="left: 0px; bottom: 0px"></div>
    <div class="resize" id="rRightUp" style="right: 0px; top: 0px"></div>
    <div class="resize" id="rLeftUp" style="left: 0px; top: 0px"></div>
    <div class="resize" id="rRight" style="right: 0px; top: 50%"></div>
    <div class="resize" id="rLeft" style="left: 0px; top: 50%"></div>
    <div class="resize" id="rUp" style="left: 50%; top: 0px"></div>

    <div class="resize" id="rDown" style="left: 50%; bottom: 0px"></div>
    </div>
    </div>
    </td>
    <td>
    <div id="viewDiv" style="width: 200px; height: 200px"></div>
    </td>
  </tr>
</table>

<script>
	var $ = function(id) {
		return "string" == typeof id ? document.getElementById(id) : id;
	};
	var isIE = (document.all) ? true : false;
	function Event(e) {
		var oEvent = isIE ? window.event : e;
		if (isIE) {
			oEvent.target = oEvent.srcElement;
			oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft;
			oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;

			if (oEvent.type == "mouseout") {
				oEvent.relatedTarget = oEvent.toElement;
			} else if (oEvent.type == "mouseover") {
				oEvent.relatedTarget = oEvent.fromElement;
			}

			oEvent.stopPropagation = function() {
				this.cancelBubble = true;
			}
		}
		return oEvent;
	}
	function addEventHandler(oTarget, sEventType, fnHandler) {
		if (oTarget.addEventListener) {
			oTarget.addEventListener(sEventType, fnHandler, false);
		} else if (oTarget.attachEvent) {
			oTarget.attachEvent("on" + sEventType, fnHandler);
		} else {
			oTarget["on" + sEventType] = fnHandler;
		}
	};
	function removeEventHandler(oTarget, sEventType, fnHandler) {
		if (oTarget.removeEventListener) {
			oTarget.removeEventListener(sEventType, fnHandler, false);
		} else if (oTarget.detachEvent) {
			oTarget.detachEvent("on" + sEventType, fnHandler);
		} else {
			oTarget["on" + sEventType] = null;
		}
	};

	var Class = {
		create : function() {
			return function() {
				this.initialize.apply(this, arguments);
			}
		}
	}
	Object.extend = function(destination, source) {
		for ( var property in source) {
			destination[property] = source[property];
		}
		return destination;
	}
	//拖放程序
	var Drag = Class.create();
	Drag.prototype = {
		//拖放对象,触发对象
		initialize : function(obj, drag, options) {
			var oThis = this;

			this._obj = $(obj);//拖放对象
			this.Drag = $(drag);//触发对象
			this._x = this._y = 0;//记录鼠标相对拖放对象的位置
			//事件对象(用于移除事件)
			this._fM = function(e) {
				oThis.Move(Event(e));
			}
			this._fS = function() {
				oThis.Stop();
			}

			this.SetOptions(options);

			this.Limit = !!this.options.Limit;
			this.mxLeft = parseInt(this.options.mxLeft);
			this.mxRight = parseInt(this.options.mxRight);
			this.mxTop = parseInt(this.options.mxTop);
			this.mxBottom = parseInt(this.options.mxBottom);

			this.onMove = this.options.onMove;

			this._obj.style.position = "absolute";
			this.Drag.style.cursor = "move";
			addEventHandler(this.Drag, "mousedown", function(e) {
				oThis.Start(Event(e));
			});
		},
		//设置默认属性
		SetOptions : function(options) {
			this.options = {//默认值
				Limit :false,//是否设置限制(为true时下面mx参数有用,可以是负数)
				mxLeft :0,//左边限制
				mxRight :0,//右边限制
				mxTop :0,//上边限制
				mxBottom :0,//下边限制
				onMove : function() {
				}//移动时执行
			};
			Object.extend(this.options, options || {});
		},
		//准备拖动
		Start : function(oEvent) {
			//防止冒泡
			oEvent.stopPropagation();
			//记录鼠标相对拖放对象的位置
			this._x = oEvent.clientX - this._obj.offsetLeft;
			this._y = oEvent.clientY - this._obj.offsetTop;
			//mousemove时移动 mouseup时停止
			addEventHandler(document, "mousemove", this._fM);
			addEventHandler(document, "mouseup", this._fS);
		},
		//拖动
		Move : function(oEvent) {
			//清除选择
			if (document.selection) {
				document.selection.empty();
			} else {
				window.getSelection().removeAllRanges();
			}
			//当前鼠标位置减去相对拖放对象的位置得到offset位置
			var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY
					- this._y;
			//设置范围限制
			if (this.Limit) {
				//获取超出长度
				var iRight = iLeft + parseInt(this._obj.style.width)
						- this.mxRight, iBottom = iTop
						+ parseInt(this._obj.style.height) - this.mxBottom;
				//这里是先设置右边下边再设置左边上边,可能会不准确
				if (iRight > 0)
					iLeft -= iRight;
				if (iBottom > 0)
					iTop -= iBottom;
				if (this.mxLeft > iLeft)
					iLeft = this.mxLeft;
				if (this.mxTop > iTop)
					iTop = this.mxTop;
			}
			//设置位置
			this._obj.style.left = iLeft + "px";
			this._obj.style.top = iTop + "px";
			//附加程序
			this.onMove();
		},
		//停止拖动
		Stop : function() {
			//移除事件
			removeEventHandler(document, "mousemove", this._fM);
			removeEventHandler(document, "mouseup", this._fS);
		}
	};
	//缩放程序
	var Resize = Class.create();
	Resize.prototype = {
		//缩放对象
		initialize : function(obj, options) {
			var oThis = this;

			this._obj = $(obj);//缩放对象
			this._right = this._down = this._left = this._up = 0;//

			//事件对象(用于移除事件)
			this._fR = function(e) {
				oThis.Resize(e);
			}
			this._fS = function() {
				oThis.Stop();
			}

			this.SetOptions(options);

			this.Limit = !!this.options.Limit;
			this.mxLeft = parseInt(this.options.mxLeft);
			this.mxRight = parseInt(this.options.mxRight);
			this.mxTop = parseInt(this.options.mxTop);
			this.mxBottom = parseInt(this.options.mxBottom);

			this.MinWidth = parseInt(this.options.MinWidth);
			this.MinHeight = parseInt(this.options.MinHeight);
			this.onResize = this.options.onResize;

			this._obj.style.position = "absolute";
		},
		//设置默认属性
		SetOptions : function(options) {
			this.options = {//默认值
				Limit :false,//是否设置限制(为true时下面mx参数有用)
				mxLeft :0,//左边限制
				mxRight :0,//右边限制
				mxTop :0,//上边限制
				mxBottom :0,//下边限制
				MinWidth :50,//最小宽度
				MinHeight :50,//最小高度
				onResize : function() {
				}//缩放时执行
			};
			Object.extend(this.options, options || {});
		},
		//设置触发对象
		Set : function(resize, side) {
			var oThis = this, resize = $(resize), _fun, _cursor;
			if (!resize)
				return;
			//根据方向设置 _fun是缩放时执行的程序 _cursor是鼠标样式
			switch (side.toLowerCase()) {
			case "up":
				_fun = function(e) {
					oThis.SetUp(e);
				};
				_cursor = "n-resize";
				break;
			case "down":
				_fun = function(e) {
					oThis.SetDown(e);
				};
				_cursor = "n-resize";
				break;
			case "left":
				_fun = function(e) {
					oThis.SetLeft(e);
				};
				_cursor = "e-resize";
				break;
			case "right":
				_fun = function(e) {
					oThis.SetRight(e);
				};
				_cursor = "e-resize";
				break;
			case "left-up":
				_fun = function(e) {
					oThis.SetLeft(e);
					oThis.SetUp(e);
				};
				_cursor = "nw-resize";
				break;
			case "right-up":
				_fun = function(e) {
					oThis.SetRight(e);
					oThis.SetUp(e);
				};
				_cursor = "ne-resize";
				break;
			case "left-down":
				_fun = function(e) {
					oThis.SetLeft(e);
					oThis.SetDown(e);
				};
				_cursor = "ne-resize";
				break;
			case "right-down":
			default:
				_fun = function(e) {
					oThis.SetRight(e);
					oThis.SetDown(e);
				};
				_cursor = "nw-resize";
			}
			//设置触发对象
			addEventHandler(resize, "mousedown", function(e) {
				oThis._fun = _fun;
				oThis.Start(Event(e));
			});
			resize.style.cursor = _cursor;
		},
		//准备缩放
		Start : function(oEvent) {
			//防止冒泡
			oEvent.stopPropagation();
			var _width = parseInt(this._obj.style.width)
					|| this._obj.offsetWidth, _height = parseInt(this._obj.style.height)
					|| this._obj.offsetHeight;
			//先计算好当前边的对应另一条边的坐标 例如右边缩放时需要左边界坐标
			this._left = oEvent.clientX - _width;
			this._right = oEvent.clientX + _width;
			this._top = oEvent.clientY - _height;
			this._bottom = oEvent.clientY + _height;
			//如果有范围 先计算好范围内最大宽度和高度
			if (this.Limit) {
				this._mxRight = this.mxRight - this._obj.offsetLeft;
				this._mxDown = this.mxBottom - this._obj.offsetTop;
				this._mxLeft = this.mxLeft + _width + this._obj.offsetLeft;
				this._mxUp = this.mxTop + _height + this._obj.offsetTop;
			}
			//mousemove时缩放 mouseup时停止
			addEventHandler(document, "mousemove", this._fR);
			addEventHandler(document, "mouseup", this._fS);
		},
		//缩放
		Resize : function(e) {
			//清除选择
			if (document.selection) {
				document.selection.empty();
			} else {