天天看點

html簡單圖檔放大鏡,jQuery輕量級簡單實用的圖檔放大鏡特效

zoomtoo是一款輕量級的簡單實用的jQuery圖檔放大鏡特效插件。這個圖檔放大鏡特效在滑鼠滑過骨牌的時候,在原來圖檔區域内部将圖檔放大。滑鼠進入和離開圖檔區域時都帶有淡入淡出的效果。該圖檔放大鏡插件的浏覽器相容性非常好,可以相容IE7+的IE浏覽器。

安裝

你可以使用bower來安裝該圖檔放大鏡插件。

bower install zoomtoo

使用方法

使用該圖檔放大鏡需要引入jQuery和jquery.zoomtoo.js檔案。

HTML結構

該圖檔放大鏡的HTML結構将一個圖檔包裹在一個容器中即可。包裹容器用于定位。

html簡單圖檔放大鏡,jQuery輕量級簡單實用的圖檔放大鏡特效

初始化插件

在頁面加載完畢之後,可以通過下面的方法來初始化該放大鏡插件。

$("#frame").zoomtoo({

magnify: 1

});

配置參數

下面是該放大鏡插件的預設配置參數。

$("#demo").zoomToo({

// 持續時間,機關毫秒

showDuration: 500,

moveDuration: 1200,

// 初始化放大級别

magnify: 1,

// 鏡頭的寬度和高度

lensWidth: 200,

lensHeight: 200

});

浏覽器相容

Firefox 2+ (Win, Mac, Linux);

IE7+ (Win);

Chrome 6+ (Win, Mac, Linux, Android, iPhone);

Safari 3.2+ (Win, Mac, iPhone);

Opera 8+ (Win, Mac, Linux, Android, iPhone).