HiZoom.js是一款简单易用的jquery放大镜插件。该jquery放大镜插件的特点是简单，易用，轻量级，压缩后的版本仅3kb。该jquery放大镜的特点还有：

  • 简单：文档详细清楚，直接上手。
  • 轻量: 压缩后的文件仅仅3KB，是 MagicZoom 插件的 1/24。
  • 兼容性强：Chrome，Firefox，Safari，IE9+。

使用方法

在页面中引入hizoom.min.css，jquery和hizoom.min.js文件。

<link href="css/hizoom.min.css" rel="stylesheet">
<script src='js/jquery.min.js'></script>
<script src='js/hizoom.min.js'></script>
HTML结构

使用该jquery放大镜插件的基本HTML结构如下：

<div class='hizoom gakki'>
  <img src='./1.png'>
</div>
<div class='hizoom ldy'>
  <img src='./2.png'>
</div>
初始化插件

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

// 调用
$('.gakki').hiZoom({
  width: 400,
  position: 'right'
});
$('.ldy').hiZoom({
  width: 300,
  position: 'left'
});

配置参数

该该jquery放大镜插件的可用配置参数如下：

属性 描述 可选值 默认值
width 放大镜容器的宽高（目前只支持正方形放大镜） 任何正数 400
position 被放大区域的位置 left|right|top|bottom right
background 放大镜背景色 合法CSS颜色值 #FFF
opacity 放大镜透明度 0~1（合法CSS值） 0.7
distance 被放大区域和放大镜容器间的距离 任何正数 20

HiZoom.js jquery放大镜插件的github地址为：https://github.com/javashop/HiZoom