|
|
前言：
這個(gè)程序主要分三部分：層的拖放、層的縮放、圖片切割（包括預(yù)覽）。
其中層的拖放是很常見(jiàn)的效果，層的縮放有點(diǎn)難度，圖片切割看著炫其實(shí)原理也很簡(jiǎn)單。
不過(guò)在實(shí)現(xiàn)的過(guò)程中也學(xué)習(xí)到很多以前不知道的東西，下面都會(huì)說(shuō)明，希望大家從中也能學(xué)到東西。
原理：
【拖放程序】
基本原理很簡(jiǎn)單，不知道的看代碼就明白，其中參考了越兔和BlueDestiny的相關(guān)文章。
下面說(shuō)一下比較有用的地方：
【范圍限制】
首先當(dāng)然是有拖放范圍參數(shù)，分別是mxLeft（左邊的left最小值）、mxRight（右邊的left最大值）、mxTop（上邊的top最小值）、mxBottom（下邊的top最大值）。
然后在拖動(dòng)程序Move()中看有沒(méi)有超過(guò)，超過(guò)的話設(shè)回極限值就行：
復(fù)制代碼 代碼如下:
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è)置ie的onselectstart和ff的MozUserSelect，
但BlueDestiny說(shuō)“用user-select會(huì)相當(dāng)于event.preventDefault。阻止默認(rèn)動(dòng)作就會(huì)在某些操作的時(shí)候?qū)е耺ouseup丟失。”，
最好的方法是ie用document.selection.empty()，ff用window.getSelection().removeAllRanges()。
所以可以在Move()中加入：
window.getSelection && window.getSelection().removeAllRanges();這種寫(xiě)法是從越兔的程序中學(xué)到的。
因?yàn)閕e的鼠標(biāo)捕獲默認(rèn)（下面會(huì)說(shuō)）帶這個(gè)，所以ie就不用了。
【鼠標(biāo)捕獲】
以前不知道js有這個(gè)東西，使用很簡(jiǎn)單：
設(shè)置捕獲：this.Drag.setCapture()；
取消捕獲：this.Drag.releaseCapture()。
它的作用是：將鼠標(biāo)捕獲設(shè)置到指定的對(duì)象。這個(gè)對(duì)象會(huì)為當(dāng)前應(yīng)用程序或整個(gè)系統(tǒng)接收所有鼠標(biāo)輸入。
還不明白的話，試試拖放的時(shí)候把鼠標(biāo)拖放到瀏覽器外面，會(huì)發(fā)現(xiàn)拖動(dòng)還在繼續(xù)，
如果沒(méi)有這個(gè)鼠標(biāo)捕獲就會(huì)失效了。
但在瀏覽器外是觸發(fā)不了mouseup的，不過(guò)還可以用losecapture事件代替：
addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
程序中給ff的window添加blur時(shí)停止的事件，越兔說(shuō)是為了可以檢測(cè)到alt+tab造成的mouseup丟失，完美一點(diǎn)，也加上去了。
這樣一個(gè)拖放程序就完成了。
JavaScript技術(shù)：JavaScript 圖片放大鏡（可拖放、縮放效果）第1/4頁(yè)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
