邦立資訊科技 > 網頁技術分享 > jQuery Cloud Zoom 圖片放大效果

Cloud Zoom 是一個jQuery插件圖像放大功能,淡出淡入的放大變化,成功讓消費者於網站中更清楚看見商品的清晰圖案,且於各大瀏覽器中皆能符合使用。

運用在標準的相片簿

Thumbnail 1 Thumbnail 2 Thumbnail 3

將滑鼠停在大圖做放大工作。

大圖片會出現在小圖片右邊的。

較小的外觀形象,縮放窗口可以由CSS做改變

特色

  • 與大多數瀏覽器(在下列測試過 IE6+, Firefox, Chrome, Opera, Safari)
  • 易於整合的基本有效HTML。
    小於6Kb(精簡)檔案大小。
    平滑變焦動作。
    相簿模式。
    色調,柔焦及內變焦功能。
    落落大方,關閉 JavaScript。
    完全無障礙,無 CSS或限定瀏覽器。
    它是完全免費的。

淺色調

可添加任何顏色的背景色(包括黑色或白色)的小圖片。色彩的強度是完全可定制的,在這裡顯示為紅色50%。

在這個例子中,使用平滑度設置為一個高增值溫和漂流的效果。

內頁變焦放大

如果你不想掩蓋任何其他網頁位置,此功能可在原位置放大

柔焦

圖片套用一個微妙的聚焦效果。

在這個例子中,縮放窗口的位置被指定為一個 div的目標,可以放置在任何地方。該運動平滑度設置為較低有種迅捷的感覺。

出處來源 : www.htmldrive.net