JavaScript 圖片放大鏡（可拖放、縮放效果）第1/4頁
2024-05-06 14:17:16
供稿：網友
前些日子突然想做一個透鏡效果，就突然想到了這個效果，于是找出當年“珍藏”的代碼決定一嘗所愿。
前言：
這個程序主要分三部分：層的拖放、層的縮放、圖片切割（包括預覽）。
其中層的拖放是很常見的效果，層的縮放有點難度，圖片切割看著炫其實原理也很簡單。
不過在實現的過程中也學習到很多以前不知道的東西，下面都會說明，希望大家從中也能學到東西。
原理：
【拖放程序】
基本原理很簡單，不知道的看代碼就明白，其中參考了越兔和BlueDestiny的相關文章。
下面說一下比較有用的地方：
【范圍限制】
首先當然是有拖放范圍參數，分別是mxLeft（左邊的left最小值）、mxRight（右邊的left最大值）、mxTop（上邊的top最小值）、mxBottom（下邊的top最大值）。
然后在拖動程序Move()中看有沒有超過，超過的話設回極限值就行：
代碼如下:
if(this.Limit){
//獲取超出長度
var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - 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;
}
【釋放選擇】
我以前就用的方法是設置ie的onselectstart和ff的MozUserSelect，
但BlueDestiny說“用user-select會相當于event.preventDefault。阻止默認動作就會在某些操作的時候導致mouseup丟失。”，
最好的方法是ie用document.selection.empty()，ff用window.getSelection().removeAllRanges()。
所以可以在Move()中加入：
window.getSelection && window.getSelection().removeAllRanges();這種寫法是從越兔的程序中學到的。
因為ie的鼠標捕獲默認（下面會說）帶這個，所以ie就不用了。
【鼠標捕獲】
以前不知道js有這個東西，使用很簡單：
設置捕獲：this.Drag.setCapture()；
取消捕獲：this.Drag.releaseCapture()。
它的作用是：將鼠標捕獲設置到指定的對象。這個對象會為當前應用程序或整個系統接收所有鼠標輸入。
還不明白的話，試試拖放的時候把鼠標拖放到瀏覽器外面，會發現拖動還在繼續，
如果沒有這個鼠標捕獲就會失效了。
但在瀏覽器外是觸發不了mouseup的，不過還可以用losecapture事件代替：
addEventHandler(this.Drag, "losecapture", this._fS);
this.Drag.setCapture();
程序中給ff的window添加blur時停止的事件，越兔說是為了可以檢測到alt+tab造成的mouseup丟失，完美一點，也加上去了。
這樣一個拖放程序就完成了。
1234下一頁閱讀全文
