JavaScript 圖片放大鏡（可拖放、縮放效果）第3/4頁(yè)
更新時(shí)間：2008年09月15日 10:35:34 作者：
背景：很久之前就在marry5.com看到這個(gè)效果，當(dāng)時(shí)覺(jué)得很神奇，礙于水平有限，沒(méi)做出來(lái)。
【圖片切割】
關(guān)于圖片切割的設(shè)計(jì)，有三個(gè)方法：
1.把圖片設(shè)為背景圖，通過(guò)設(shè)置背景圖的位置來(lái)實(shí)現(xiàn)，但這樣的缺點(diǎn)是只能按圖片的正常比例實(shí)現(xiàn)，不夠靈活；
2.把圖片放到切割對(duì)象里面，通過(guò)設(shè)置圖片的top和left實(shí)現(xiàn)，這個(gè)方法是可行，但下面有更簡(jiǎn)單的方法實(shí)現(xiàn)；
3.通過(guò)設(shè)置圖片的clip來(lái)實(shí)現(xiàn)。
這個(gè)方法是從當(dāng)年“珍藏”的代碼中看到的，雖然以前接觸過(guò)clip，但都忘了。
clip的作用是“檢索或設(shè)置對(duì)象的可視區(qū)域?？梢晠^(qū)域外的部分是透明的?！?
依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值來(lái)剪切。
例如：
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
注意position:absolute的設(shè)置是必須的（詳細(xì)看手冊(cè)）。
下面說(shuō)說(shuō)具體實(shí)現(xiàn)原理：
首先需要一個(gè)容器，拖放對(duì)象，圖片地址，顯示寬度和高度，
還要插入三個(gè)層：
底圖層：那個(gè)半透明的圖片，
顯示層：拖放對(duì)象中正常顯示的那個(gè)部分，
拖動(dòng)層：就是拖放對(duì)象，
其中為了底圖層和顯示層能完美的重疊，我兩個(gè)層都用了絕對(duì)定位，定在左上角。
zIndex也要設(shè)置一下，保證三個(gè)層的順序。
下面是很簡(jiǎn)單但最重要設(shè)置切割函數(shù)SetPos()，按拖放對(duì)象的參數(shù)進(jìn)行切割：
復(fù)制代碼 代碼如下:
var o = this.Drag;
this._cropper.style.clip = "rect(" + o.offsetTop + "px " + (o.offsetLeft + o.offsetWidth) + "px " + (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft + "px)";
只要把SetPos()放到Drag的onMove和Resize的onResize中就行。
onMove和onResize分別是拖放和縮放時(shí)附加執(zhí)行的程序。
程序中有一個(gè)Init()函數(shù)，它的作用是初始化一些設(shè)置，
特別分出來(lái)的原因是為了在用戶修改了屬性后執(zhí)行一次，就可以根據(jù)修改過(guò)的屬性重新初始化一次。
更好的做法是根據(jù)不同的屬性修改修改需要修改的設(shè)置，這里我是偷懶了。
【切割預(yù)覽】
至于預(yù)覽效果也不難，根據(jù)預(yù)覽高度寬度和拖放對(duì)象（顯示層）的參數(shù)，計(jì)算出圖片和預(yù)覽圖的比例scale：
復(fù)制代碼 代碼如下:
var o = this.Drag, h = this.viewWidth, w = h * o.offsetWidth / o.offsetHeight;
if(w > this.viewHeight){ w = this.viewHeight; h = w * o.offsetHeight / o.offsetWidth; }
var scale = h / o.offsetHeight
通過(guò)這個(gè)比例就可以計(jì)算出預(yù)覽圖的width、height、top、left了：
復(fù)制代碼 代碼如下:
var scale = h / o.offsetHeight, ph = this.Height * scale, pw = this.Width * scale, pt = o.offsetTop * scale, pl = o.offsetLeft * scale, styleView = this._view.style;
styleView.width = pw + "px"; styleView.height = ph + "px";
styleView.top = - pt + "px "; styleView.left = - pl + "px";
最好根據(jù)這些參數(shù)切割預(yù)覽圖：
復(fù)制代碼 代碼如下:
styleView.clip = "rect(" + pt + "px " + (pl + w) + "px " + (pt + h) + "px " + pl + "px)";
預(yù)覽圖效果就做好了。
【拖放補(bǔ)充】
在ie中，如果對(duì)象的position為absolute，并且背景是透明的話，會(huì)觸發(fā)不了鼠標(biāo)事件（真的是透明了）。
我的解決方法是在對(duì)象里面加一個(gè)透明的width和height都是100%的層，這樣就能解決了。
但ie6中還有問(wèn)題，在js修改對(duì)象的高度后，ie6并居然不會(huì)自動(dòng)填充，
還好BlueDestiny告訴我解決的方法，設(shè)置對(duì)象的overflow為hidden就可以解決，
BlueDestiny說(shuō)“出現(xiàn)這個(gè)問(wèn)題的原因是因?yàn)镮E6渲染的問(wèn)題，通過(guò)某些CSS的屬性可以讓DOM改變之后再次渲染。”
雖然不太明白，但總算解決：
復(fù)制代碼 代碼如下:
this.Drag.style.overflow = "hidden";
(function(style){
style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
})(this.Drag.appendChild(document.createElement("div")).style)
源碼：
復(fù)制代碼 代碼如下:
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 = {
//拖放對(duì)象,觸發(fā)對(duì)象
initialize: function(obj, drag, options) {
var oThis = this;
this._obj = $(obj);//拖放對(duì)象
this.Drag = $(drag);//觸發(fā)對(duì)象
this._x = this._y = 0;//記錄鼠標(biāo)相對(duì)拖放對(duì)象的位置
//事件對(duì)象(用于移除事件)
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); });
},
//設(shè)置默認(rèn)屬性
SetOptions: function(options) {
this.options = {//默認(rèn)值
Limit: false,//是否設(shè)置限制(為true時(shí)下面參數(shù)有用,可以是負(fù)數(shù))
mxLeft: 0,//左邊限制
mxRight: 0,//右邊限制
mxTop: 0,//上邊限制
mxBottom: 0,//下邊限制
onMove: function(){}//移動(dòng)時(shí)執(zhí)行
};
Object.extend(this.options, options || {});
},
//準(zhǔn)備拖動(dòng)
Start: function(oEvent) {
//記錄鼠標(biāo)相對(duì)拖放對(duì)象的位置
this._x = oEvent.clientX - this._obj.offsetLeft;
this._y = oEvent.clientY - this._obj.offsetTop;
//mousemove時(shí)移動(dòng) mouseup時(shí)停止
addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);
//使鼠標(biāo)移到窗口外也能釋放
if(isIE){
addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//拖動(dòng)
Move: function(oEvent) {
//清除選擇(ie設(shè)置捕獲后默認(rèn)帶這個(gè))
window.getSelection && window.getSelection().removeAllRanges();
//當(dāng)前鼠標(biāo)位置減去相對(duì)拖放對(duì)象的位置得到offset位置
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
//設(shè)置范圍限制
if(this.Limit){
//獲取超出長(zhǎng)度
var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
//這里是先設(shè)置右邊下邊再設(shè)置左邊上邊,可能會(huì)不準(zhǔn)確
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(this.mxLeft > iLeft) iLeft = this.mxLeft;
if(this.mxTop > iTop) iTop = this.mxTop;
}
//設(shè)置位置
this._obj.style.left = iLeft + "px";
this._obj.style.top = iTop + "px";
//附加程序
this.onMove();
},
//停止拖動(dòng)
Stop: function() {
//移除事件
removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
}
};
//縮放程序
var Resize = Class.create();
Resize.prototype = {
//縮放對(duì)象
initialize: function(obj, options) {
var oThis = this;
this._obj = $(obj);//縮放對(duì)象
this._right = this._down = this._left = this._up = 0;//坐標(biāo)參數(shù)
this._scale = 1;//比例參數(shù)
this._touch = null;//當(dāng)前觸發(fā)對(duì)象
//用currentStyle（ff用getComputedStyle）取得最終樣式
var _style = this._obj.currentStyle || document.defaultView.getComputedStyle(this._obj, null);
this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth);
this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth);
//事件對(duì)象(用于移除事件)
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.Scale = !!this.options.Scale;
this.onResize = this.options.onResize;
this._obj.style.position = "absolute";
},
//設(shè)置默認(rèn)屬性
SetOptions: function(options) {
this.options = {//默認(rèn)值
Limit: false,//是否設(shè)置限制(為true時(shí)下面mx參數(shù)有用)
mxLeft: 0,//左邊限制
mxRight: 0,//右邊限制
mxTop: 0,//上邊限制
mxBottom: 0,//下邊限制
MinWidth: 50,//最小寬度
MinHeight: 50,//最小高度
Scale: false,//是否按比例縮放
onResize: function(){}//縮放時(shí)執(zhí)行
};
Object.extend(this.options, options || {});
},
//設(shè)置觸發(fā)對(duì)象
Set: function(resize, side) {
var oThis = this, resize = $(resize), _fun, _cursor;
if(!resize) return;
//根據(jù)方向設(shè)置 _fun是縮放時(shí)執(zhí)行的程序 _cursor是鼠標(biāo)樣式
switch (side.toLowerCase()) {
case "up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleUpRight(e); }else{ oThis.SetUp(e); } };
_cursor = "n-resize";
break;
case "down" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleDownRight(e); }else{ oThis.SetDown(e); } };
_cursor = "n-resize";
break;
case "left" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); } };
_cursor = "e-resize";
break;
case "right" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); } };
_cursor = "e-resize";
break;
case "left-up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftUp(e); }else{ oThis.SetLeft(e); oThis.SetUp(e); } };
_cursor = "nw-resize";
break;
case "right-up" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightUp(e); }else{ oThis.SetRight(e); oThis.SetUp(e); } };
_cursor = "ne-resize";
break;
case "left-down" :
_fun = function(e){ if(oThis.Scale){ oThis.scaleLeftDown(e); }else{ oThis.SetLeft(e); oThis.SetDown(e); } };
_cursor = "ne-resize";
break;
case "right-down" :
default :
_fun = function(e){ if(oThis.Scale){ oThis.scaleRightDown(e); }else{ oThis.SetRight(e); oThis.SetDown(e); } };
_cursor = "nw-resize";
}
//插入字符解決ff下捕獲效的問(wèn)題
if(!isIE){ resize.innerHTML = "<font size='1px'> </font>"; }
//設(shè)置觸發(fā)對(duì)象
resize.style.cursor = _cursor;
addEventHandler(resize, "mousedown", function(e){ oThis._fun = _fun; oThis._touch = resize; oThis.Start(window.event || e); });
},
//準(zhǔn)備縮放
Start: function(oEvent, o) {
//防止冒泡
if(isIE){ oEvent.cancelBubble = true; } else { oEvent.stopPropagation(); }
//計(jì)算樣式初始值
this.style_width = this._obj.offsetWidth;
this.style_height = this._obj.offsetHeight;
this.style_left = this._obj.offsetLeft;
this.style_top = this._obj.offsetTop;
//設(shè)置縮放比例
if(this.Scale){ this._scale = this.style_width / this.style_height; }
//計(jì)算當(dāng)前邊的對(duì)應(yīng)另一條邊的坐標(biāo) 例如右邊縮放時(shí)需要左邊界坐標(biāo)
this._left = oEvent.clientX - this.style_width;
this._right = oEvent.clientX + this.style_width;
this._up = oEvent.clientY - this.style_height;
this._down = oEvent.clientY + this.style_height;
//如果有范圍 先計(jì)算好范圍內(nèi)最大寬度和高度
if(this.Limit){
this._mxRight = this.mxRight - this._obj.offsetLeft;
this._mxDown = this.mxBottom - this._obj.offsetTop;
this._mxLeft = this.mxLeft + this.style_width + this._obj.offsetLeft;
this._mxUp = this.mxTop + this.style_height + this._obj.offsetTop;
}
//mousemove時(shí)縮放 mouseup時(shí)停止
addEventHandler(document, "mousemove", this._fR);
addEventHandler(document, "mouseup", this._fS);
//使鼠標(biāo)移到窗口外也能釋放
if(isIE){
addEventHandler(this._touch, "losecapture", this._fS);
this._touch.setCapture();
}else{
addEventHandler(window, "blur", this._fS);
}
},
//縮放
Resize: function(e) {
//沒(méi)有觸發(fā)對(duì)象的話返回
if(!this._touch) return;
//清除選擇(ie設(shè)置捕獲后默認(rèn)帶這個(gè))
window.getSelection && window.getSelection().removeAllRanges();
//執(zhí)行縮放程序
this._fun(window.event || e);
//設(shè)置樣式
//因?yàn)橛?jì)算用的offset是把邊框算進(jìn)去的所以要減去
this._obj.style.width = this.style_width - this._xBorder + "px";
this._obj.style.height = this.style_height - this._yBorder + "px";
this._obj.style.top = this.style_top + "px";
this._obj.style.left = this.style_left + "px";
//附加程序
this.onResize();
},
//普通縮放
//右邊
SetRight: function(oEvent) {
//當(dāng)前坐標(biāo)位置減去左邊的坐標(biāo)等于當(dāng)前寬度
this.repairRight(oEvent.clientX - this._left);
},
//下邊
SetDown: function(oEvent) {
this.repairDown(oEvent.clientY - this._up);
},
//左邊
SetLeft: function(oEvent) {
//右邊的坐標(biāo)減去當(dāng)前坐標(biāo)位置等于當(dāng)前寬度
this.repairLeft(this._right - oEvent.clientX);
},
//上邊
SetUp: function(oEvent) {
this.repairUp(this._down - oEvent.clientY);
},
//比例縮放
//比例縮放右下
scaleRightDown: function(oEvent) {
//先計(jì)算寬度然后按比例計(jì)算高度最后根據(jù)確定的高度計(jì)算寬度（寬度優(yōu)先）
this.SetRight(oEvent);
this.repairDown(parseInt(this.style_width / this._scale));
this.repairRight(parseInt(this.style_height * this._scale));
},
//比例縮放左下
scaleLeftDown: function(oEvent) {
this.SetLeft(oEvent);
this.repairDown(parseInt(this.style_width / this._scale));
this.repairLeft(parseInt(this.style_height * this._scale));
},
//比例縮放右上
scaleRightUp: function(oEvent) {
this.SetRight(oEvent);
this.repairUp(parseInt(this.style_width / this._scale));
this.repairRight(parseInt(this.style_height * this._scale));
},
//比例縮放左上
scaleLeftUp: function(oEvent) {
this.SetLeft(oEvent);
this.repairUp(parseInt(this.style_width / this._scale));
this.repairLeft(parseInt(this.style_height * this._scale));
},
//這里是高度優(yōu)先用于上下兩邊(體驗(yàn)更好)
//比例縮放下右
scaleDownRight: function(oEvent) {
this.SetDown(oEvent);
this.repairRight(parseInt(this.style_height * this._scale));
this.repairDown(parseInt(this.style_width / this._scale));
},
//比例縮放上右
scaleUpRight: function(oEvent) {
this.SetUp(oEvent);
this.repairRight(parseInt(this.style_height * this._scale));
this.repairUp(parseInt(this.style_width / this._scale));
},
//修正程序
//修正右邊
repairRight: function(iWidth) {
//右邊和下邊只要設(shè)置寬度和高度就行
//當(dāng)少于最少寬度
if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
//當(dāng)超過(guò)當(dāng)前設(shè)定的最大寬度
if(this.Limit && iWidth > this._mxRight){ iWidth = this._mxRight; }
//修改樣式
this.style_width = iWidth;
},
//修正下邊
repairDown: function(iHeight) {
if (iHeight < this.MinHeight){ iHeight = this.MinHeight; }
if(this.Limit && iHeight > this._mxDown){ iHeight = this._mxDown; }
this.style_height = iHeight;
},
//修正左邊
repairLeft: function(iWidth) {
//左邊和上邊比較麻煩 因?yàn)檫€要計(jì)算left和top
//當(dāng)少于最少寬度
if (iWidth < this.MinWidth){ iWidth = this.MinWidth; }
//當(dāng)超過(guò)當(dāng)前設(shè)定的最大寬度
else if(this.Limit && iWidth > this._mxLeft){ iWidth = this._mxLeft; }
//修改樣式
this.style_width = iWidth;
this.style_left = this._obj.offsetLeft + this._obj.offsetWidth - iWidth;
},
//修正上邊
repairUp: function(iHeight) {
if(iHeight < this.MinHeight){ iHeight = this.MinHeight; }
else if(this.Limit && iHeight > this._mxUp){ iHeight = this._mxUp; }
this.style_height = iHeight;
this.style_top = this._obj.offsetTop + this._obj.offsetHeight - iHeight;
},
//停止縮放
Stop: function() {
//移除事件
removeEventHandler(document, "mousemove", this._fR);
removeEventHandler(document, "mouseup", this._fS);
if(isIE){
removeEventHandler(this._touch, "losecapture", this._fS);
this._touch.releaseCapture();
}else{
removeEventHandler(window, "blur", this._fS);
}
this._touch = null;
}
};
//圖片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
//容器對(duì)象,拖放縮放對(duì)象,圖片地址,寬度,高度
initialize: function(container, drag, url, width, height, options) {
var oThis = this;
//容器對(duì)象
this.Container = $(container);
this.Container.style.position = "relative";
this.Container.style.overflow = "hidden";
//拖放對(duì)象
this.Drag = $(drag);
this.Drag.style.cursor = "move";
this.Drag.style.zIndex = 200;
if(isIE){
//設(shè)置overflow解決ie6的渲染問(wèn)題(縮放時(shí)填充對(duì)象高度的問(wèn)題)
this.Drag.style.overflow = "hidden";
//ie下用一個(gè)透明的層填充拖放對(duì)象 不填充的話onmousedown會(huì)失效(未知原因)
(function(style){
style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
})(this.Drag.appendChild(document.createElement("div")).style)
}else{
//插入字符解決ff下捕獲失效的問(wèn)題
this.Drag.innerHTML += "<font size='1px'> </font>";
}
this._pic = this.Container.appendChild(document.createElement("img"));//圖片對(duì)象
this._cropper = this.Container.appendChild(document.createElement("img"));//切割對(duì)象
this._pic.style.position = this._cropper.style.position = "absolute";
this._pic.style.top = this._pic.style.left = this._cropper.style.top = this._cropper.style.left = "0";//對(duì)齊
this._cropper.style.zIndex = 100;
this._cropper.onload = function(){ oThis.SetPos(); }
this.Url = url;//圖片地址
this.Width = parseInt(width);//寬度
this.Height = parseInt(height);//高度
this.SetOptions(options);
this.Opacity = parseInt(this.options.Opacity);
this.dragTop = parseInt(this.options.dragTop);
this.dragLeft = parseInt(this.options.dragLeft);
this.dragWidth = parseInt(this.options.dragWidth);
this.dragHeight = parseInt(this.options.dragHeight);
//設(shè)置預(yù)覽對(duì)象
this.View = $(this.options.View) || null;//預(yù)覽對(duì)象
this.viewWidth = parseInt(this.options.viewWidth);
this.viewHeight = parseInt(this.options.viewHeight);
this._view = null;//預(yù)覽圖片對(duì)象
if(this.View){
this.View.style.position = "relative";
this.View.style.overflow = "hidden";
this._view = this.View.appendChild(document.createElement("img"));
this._view.style.position = "absolute";
}
this.Scale = parseInt(this.options.Scale);
//設(shè)置拖放
this._drag = new Drag(this.Drag, this.Drag, { Limit: true, onMove: function(){ oThis.SetPos(); } });
//設(shè)置縮放
this._resize = this.GetResize();
this.Init();
},
//設(shè)置默認(rèn)屬性
SetOptions: function(options) {
this.options = {//默認(rèn)值
Opacity: 50,//透明度(0到100)
//拖放位置和寬高
dragTop: 0,
dragLeft: 0,
dragWidth: 100,
dragHeight: 100,
//縮放觸發(fā)對(duì)象
Right: "",
Left: "",
Up: "",
Down: "",
RightDown: "",
LeftDown: "",
RightUp: "",
LeftUp: "",
Scale: false,//是否按比例縮放
//預(yù)覽對(duì)象設(shè)置
View: "",//預(yù)覽對(duì)象
viewWidth: 100,//預(yù)覽寬度
viewHeight: 100//預(yù)覽高度
};
Object.extend(this.options, options || {});
},
//初始化對(duì)象
Init: function() {
var oThis = this;
//設(shè)置容器
this.Container.style.width = this.Width + "px";
this.Container.style.height = this.Height + "px";
//設(shè)置拖放對(duì)象
this.Drag.style.top = this.dragTop + "px";
this.Drag.style.left = this.dragLeft + "px";
this.Drag.style.width = this.dragWidth + "px";
this.Drag.style.height = this.dragHeight + "px";
//設(shè)置切割對(duì)象
this._pic.src = this._cropper.src = this.Url;
this._pic.style.width = this._cropper.style.width = this.Width + "px";
this._pic.style.height = this._cropper.style.height = this.Height + "px";
if(isIE){
this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
} else {
this._pic.style.opacity = this.Opacity / 100;
}
//設(shè)置預(yù)覽對(duì)象
if(this.View){ this._view.src = this.Url; }
//設(shè)置拖放
this._drag.mxRight = this.Width; this._drag.mxBottom = this.Height;
//設(shè)置縮放
if(this._resize){ this._resize.mxRight = this.Width; this._resize.mxBottom = this.Height; this._resize.Scale = this.Scale; }
},
//設(shè)置獲取縮放對(duì)象
GetResize: function() {
var op = this.options;
//有觸發(fā)對(duì)象時(shí)才設(shè)置
if(op.RightDown || op.LeftDown || op.RightUp || op.LeftUp || op.Right || op.Left || op.Up || op.Down ){
var oThis = this, _resize = new Resize(this.Drag, { Limit: true, onResize: function(){ oThis.SetPos(); } });
//設(shè)置縮放觸發(fā)對(duì)象
if(op.RightDown){ _resize.Set(op.RightDown, "right-down"); }
if(op.LeftDown){ _resize.Set(op.LeftDown, "left-down"); }
if(op.RightUp){ _resize.Set(op.RightUp, "right-up"); }
if(op.LeftUp){ _resize.Set(op.LeftUp, "left-up"); }
if(op.Right){ _resize.Set(op.Right, "right"); }
if(op.Left){ _resize.Set(op.Left, "left"); }
if(op.Up){ _resize.Set(op.Up, "up"); }
if(op.Down){ _resize.Set(op.Down, "down"); }
return _resize;
} else { return null; }
},
//設(shè)置切割
SetPos: function() {
var o = this.Drag;
//按拖放對(duì)象的參數(shù)進(jìn)行切割
this._cropper.style.clip = "rect(" + o.offsetTop + "px " + (o.offsetLeft + o.offsetWidth) + "px " + (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft + "px)";
//切割預(yù)覽
if(this.View) this.PreView();
},
//切割預(yù)覽
PreView: function() {
//按比例設(shè)置寬度和高度
var o = this.Drag, h = this.viewWidth, w = h * o.offsetWidth / o.offsetHeight;
if(w > this.viewHeight){ w = this.viewHeight; h = w * o.offsetHeight / o.offsetWidth; }
//獲取對(duì)應(yīng)比例尺寸
var scale = h / o.offsetHeight, ph = this.Height * scale, pw = this.Width * scale, pt = o.offsetTop * scale, pl = o.offsetLeft * scale, styleView = this._view.style;
//設(shè)置樣式
styleView.width = pw + "px"; styleView.height = ph + "px";
styleView.top = - pt + "px "; styleView.left = - pl + "px";
//切割預(yù)覽圖
styleView.clip = "rect(" + pt + "px " + (pl + w) + "px " + (pt + h) + "px " + pl + "px)";
}
}
使用說(shuō)明：
相關(guān)文章
靜態(tài)的動(dòng)態(tài)續(xù)篇之來(lái)點(diǎn)XML
靜態(tài)的動(dòng)態(tài)續(xù)篇之來(lái)點(diǎn)XML...2006-08-08
小程序開發(fā)?page-container?頁(yè)面容器彈出對(duì)話框功能的實(shí)現(xiàn)
這篇文章主要介紹了小程序開發(fā)?page-container?頁(yè)面容器，彈出對(duì)話框,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
JavaScript this綁定與this指向問(wèn)題的解析
本文主要介紹了JavaScript this綁定與this指向問(wèn)題的解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果
本文通過(guò)實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果，本文附有圖片和示例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-11-11
當(dāng)談到JavaScript編程中的高級(jí)概念和技巧時(shí),閉包（Closures）是一個(gè)重要而有趣的主題,閉包是一種函數(shù)與其創(chuàng)建時(shí)的詞法環(huán)境的組合,它允許我們捕獲和保留局部變量,并在函數(shù)之外使用它們,在這篇文章中,我們將深入探討JavaScript中閉包的4種有用技巧2023-10-10
原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
EditPlus 正則表達(dá)式 實(shí)戰(zhàn)(3)
這篇文章主要介紹了EditPlus 正則表達(dá)式 實(shí)戰(zhàn)(3)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
JavaScript函數(shù)節(jié)流概念與用法實(shí)例詳解
這篇文章主要介紹了JavaScript函數(shù)節(jié)流概念與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript函數(shù)節(jié)流的概念、功能,并分析了函數(shù)節(jié)流的用法與使用技巧,需要的朋友可以參考下2016-06-06
本文將通過(guò)一些常見的FAQ來(lái)帶大家一起學(xué)習(xí)一下怎么用工具定位javascript里的內(nèi)存問(wèn)題，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-06-06
Firefox中通過(guò)JavaScript復(fù)制數(shù)據(jù)到剪貼板(Copy to Clipboard 跨瀏覽器版)
這篇文章主要介紹了irefox中通過(guò)JavaScript復(fù)制數(shù)據(jù)到剪貼板的方法，可以跨瀏覽器使用，大家可以使用看看2013-11-11