html简单图片放大镜,jQuery轻量级简单实用的图片放大镜特效

zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件。这个图片放大镜特效在鼠标滑过骨牌的时候，在原来图片区域内部将图片放大。鼠标进入和离开图片区域时都带有淡入淡出的效果。该图片放大镜插件的浏览器兼容性非常好，可以兼容IE7+的IE浏览器。

安装

你可以使用bower来安装该图片放大镜插件。

bower install zoomtoo

使用方法

使用该图片放大镜需要引入jQuery和jquery.zoomtoo.js文件。

HTML结构

该图片放大镜的HTML结构将一个图片包裹在一个容器中即可。包裹容器用于定位。

初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该放大镜插件。

$("#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).