简单易用jquery放大镜插件 淘宝图片放大
  立即下载
简要教程

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|bottomright
background放大镜背景色合法CSS颜色值#FFF
opacity放大镜透明度0~1(合法CSS值)0.7
distance被放大区域和放大镜容器间的距离任何正数20

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

 标签 图片插件   JQ插件  
相关评论(0)
您是不是忘了说点什么?

友情提示:垃圾评论一律封号...

还没有评论,快来抢沙发吧!