JavaScript 图片切割成效(带拖拽,缩放,区域限制)
日期：2014-05-16 浏览次数：20437 次
?JavaScript 图片切割效果(带拖拽,缩放,区域限制)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 图片切割效果（带拖放、缩放效果） </title>
</head>
<body>
<style type="text/css">
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#F00;width:5px; height:5px; z-index:500; font-size:0;}
#dragDiv{border:1px solid #000000;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
? <tr>
??? <td width="50%"><div id="bgDiv" style="width:400px; height:500px;">
??????? <div id="dragDiv">
????????? <div id="rRightDown" style="right:0; bottom:0;"> </div>
????????? <div id="rLeftDown" style="left:0; bottom:0;"> </div>
????????? <div id="rRightUp" style="right:0; top:0;"> </div>
????????? <div id="rLeftUp" style="left:0; top:0;"> </div>
????????? <div id="rRight" style="right:0; top:50%;"> </div>
????????? <div id="rLeft" style="left:0; top:50%;"> </div>
????????? <div id="rUp" style="top:0; left:50%;"> </div>
????????? <div id="rDown" style="bottom:0;left:50%;"></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 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(window.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";
?addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); });
? },
? //设置默认属性
? SetOptions: function(options) {
??? this.options = {//默认值
? Limit:? false,//是否设置限制(为true时下面参数有用,可以是负数)
? mxLeft:? 0,//左边限制
? mxRight: 0,//右边限制
? mxTop:?
