浙江 杭州

jZoom-轻量级jQuery图片放大镜插件

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-02-09

人气5544

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


jZoom是一款简单实用的轻量级jQuery图片放大镜插件。该图片放大镜插件易于使用,它在鼠标滑过图片时,在图片的右侧或指定位置显示出高清大图。

使用方法

HTML结构

该图片放大镜效果需要使用一个容器来包裹缩略图。

<div class="jzoom">
  <img src="img/mm.jpg" height="300" width="372">
</div>                  
                
初始化插件

在页面DOM元素加载完毕之后,可以通过jzoom()方法来初始化该图片放大镜插件。

$('#id').jzoom();                 
                
注意事项
  • 1、CSS部分代码已完全集成到JS代码中。
  • 2、如果父元素没有进行定位,则会默认添加position: relative属性。
  • 3、大图与原图之间需要有一定的对应关系:
    • 名称对应:如原图的文件名为image,则大图的文件名需为“image + 后缀名” ,后缀名默认为“_big”。
    • 格式对应: 大图与原图的格式建议相同,也可指定原图的格式,但发现在IE下有时会出现bug。
    • 位于同一目录下。

配置参数

jzoom图片放大镜插件的可用配置参数有:

  • width:默认值为400,放大镜div的宽度。
  • height:默认值为400,放大镜div的高度。
  • position: 默认值为"right",放大镜div相对于原图的位置,可以设置为"top"、"bottom"、"left"。
  • offsetX:默认值为20,放大镜div相对于原图的水平偏移,不能为负值。
  • offsetY:默认值为0,放大镜div相对于原图的垂直偏移,不能为负值。
  • opacity:默认值为0.6,镜片div的透明度。
  • bgColor:默认值为#fff,镜片div的背景色。
  • loading:默认值为Loading...,加载图片时显示的文字,水平垂直居中。
  • suffixName:默认值为_big,大图后缀名。
  • imgType:默认值为原图格式,大图的格式,建议与原图相同。

jzoom图片放大镜插件的github地址为:https://github.com/pciapcib/jZoom

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:361.48KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1551.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jZoom-轻量级jQuery图片放大镜插件

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)