我一直在為我的一個(gè)客戶寫一個(gè)小腳本，需要放大產(chǎn)品圖像。任務(wù)是創(chuàng)建一個(gè)腳本，允許用戶在中等大小的圖像上移動(dòng)光標(biāo)時(shí)看到產(chǎn)品的大細(xì)節(jié)。在這個(gè)過(guò)程中，我決定創(chuàng)建一個(gè)jQuery插件并與你們分享！

正如我所有的腳本一樣，我試圖讓事情盡可能的輕量級(jí)，最重要的是，盡可能的可定制。我希望你會(huì)發(fā)現(xiàn)這很容易應(yīng)用到你自己的網(wǎng)站上。

你需要這個(gè)插件工作的全部是錨元素，包含鏈接到大圖像的小圖像，但是這個(gè)結(jié)構(gòu)是必需的:

腳本(和CSS)負(fù)責(zé)剩下的事情。

選擇

這個(gè)插件可以用幾個(gè)選項(xiàng)和簡(jiǎn)單的CSS定義來(lái)定制。就CSS而言，你需要做的就是定義新創(chuàng)建的圖像縮放元素的大小、位置和外觀。在我的演示中，我使用了這個(gè)定義:

 

你會(huì)注意到行高屬性…我使用if來(lái)垂直對(duì)齊加載詳細(xì)圖像時(shí)顯示的消息文本。當(dāng)然，你可以使用你自己的定位方法，你自己的文本，如果你想插入額外的標(biāo)記，并添加你自己的CSS樣式的預(yù)加載程序。或許一些預(yù)裝者gif作為預(yù)裝者圖片？我將把這個(gè)問(wèn)題留給你，我在這里展示的是一個(gè)簡(jiǎn)單的例子，你可以很容易地定制。

讓我們來(lái)看看插件選項(xiàng)。以下是它們的默認(rèn)值和描述列表:

編號(hào)

默認(rèn)值:"簡(jiǎn)單縮放"
新創(chuàng)建的圖像縮放元素的ID。當(dāng)然你可以使用你自己的，但是一定要相應(yīng)地更新CSS。

 

默認(rèn)

默認(rèn)值:“身體”
這定義了新創(chuàng)建的圖像縮放元素將被插入的DOM元素。通過(guò)編輯這個(gè)選項(xiàng)，您可以將它插入到DOM中您喜歡的任何地方。

附加

默認(rèn)值:“真實(shí)”
如果設(shè)置為true(默認(rèn))，新創(chuàng)建的元素將作為父元素的最后一個(gè)子元素插入。如果此選項(xiàng)設(shè)置為false，那么新創(chuàng)建的元素將作為父元素的第一個(gè)子元素插入。

 

事先裝好

默認(rèn)值:“正在加載…”
加載大圖像之前出現(xiàn)的消息。您可以使用此選項(xiàng)編寫自己的預(yù)加載消息，并插入任何您想要的HTML。如果你想用預(yù)裝的gif，我建議你用背景圖片。

錯(cuò)誤

默認(rèn)值:"加載圖像時(shí)出現(xiàn)問(wèn)題。"
如果找不到或無(wú)法加載大圖像，將會(huì)出現(xiàn)此錯(cuò)誤消息。您可以將此選項(xiàng)用于自定義錯(cuò)誤消息。

下面是使用一些自定義選項(xiàng)的示例代碼: