我一直在為我的一個客戶寫一個小腳本，需要放大產品圖像。任務是創建一個腳本，允許用戶在中等大小的圖像上移動光標時看到產品的大細節。在這個過程中，我決定創建一個jQuery插件并與你們分享！
正如我所有的腳本一樣，我試圖讓事情盡可能的輕量級，最重要的是，盡可能的可定制。我希望你會發現這很容易應用到你自己的網站上。
腳本(和CSS)負責剩下的事情。
選擇
這個插件可以用幾個選項和簡單的CSS定義來定制。就CSS而言，你需要做的就是定義新創建的圖像縮放元素的大小、位置和外觀。在我的演示中，我使用了這個定義:
你會注意到行高屬性…我使用if來垂直對齊加載詳細圖像時顯示的消息文本。當然，你可以使用你自己的定位方法，你自己的文本，如果你想插入額外的標記，并添加你自己的CSS樣式的預加載程序?；蛟S一些預裝者gif作為預裝者圖片？我將把這個問題留給你，我在這里展示的是一個簡單的例子，你可以很容易地定制。
讓我們來看看插件選項。以下是它們的默認值和描述列表:
編號
默認值:"簡單縮放"新創建的圖像縮放元素的ID。當然你可以使用你自己的，但是一定要相應地更新CSS。
默認
默認值:“身體”
這定義了新創建的圖像縮放元素將被插入的DOM元素。通過編輯這個選項，您可以將它插入到DOM中您喜歡的任何地方。
附加
默認值:“真實”
如果設置為true(默認)，新創建的元素將作為父元素的最后一個子元素插入。如果此選項設置為false，那么新創建的元素將作為父元素的第一個子元素插入。
事先裝好
默認值:“正在加載…”
加載大圖像之前出現的消息。您可以使用此選項編寫自己的預加載消息，并插入任何您想要的HTML。如果你想用預裝的gif，我建議你用背景圖片。
錯誤
默認值:"加載圖像時出現問題。"
如果找不到或無法加載大圖像，將會出現此錯誤消息。您可以將此選項用于自定義錯誤消息。
下面是使用一些自定義選項的示例代碼:
