简单易用的jquery放大镜插件
源码介绍
HiZoom.js是一款简单易用的jquery放大镜插件。该jquery放大镜插件的特点是简单,易用,轻量级,压缩后的版本仅3kb。该jquery放大镜的特点还有: 在页面中引入hizoom.min.css,jquery和hizoom.min.js文件。 使用该jquery放大镜插件的基本HTML结构如下: 在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery放大镜插件。 该该jquery放大镜插件的可用配置参数如下: HiZoom.js jquery放大镜插件的github地址为:https://github.com/javashop/HiZoom简要教程
使用方法
<link href="css/hizoom.min.css" rel="stylesheet">
<script src='js/jquery.min.js'></script>
<script src='js/hizoom.min.js'></script>
HTML结构
<div class='hizoom gakki'>
<img src='./1.png'>
</div>
<div class='hizoom ldy'>
<img src='./2.png'>
</div>
初始化插件
// 调用
$('.gakki').hiZoom({
width: 400,
position: 'right'
});
$('.ldy').hiZoom({
width: 300,
position: 'left'
});
配置参数
属性
描述
可选值
默认值
width
放大镜容器的宽高(目前只支持正方形放大镜)
任何正数
400
position
被放大区域的位置
left|right|top|bottom
right
background
放大镜背景色
合法CSS颜色值
#FFF
opacity
放大镜透明度
0~1(合法CSS值)
0.7
distance
被放大区域和放大镜容器间的距离
任何正数
20
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 简单易用的jquery放大镜插件
发表评论 取消回复