一个轻量级的jQuery放大镜缩放插件。
Posted
tags:
中文标题：一个轻量级的jQuery放大镜缩放插件。 原文标题：A lightweight jQuery magnifying glass zoom plugin. 项目评级：Star:236 Fork:66 下载地址：https://github.com/thdoan/magnify 详情介绍jQuery放大
Magnify是一个简单、轻量级的jQuery插件，它为图像添加了放大镜式的缩放功能。对于电子商务网站上的产品图像，或者如果你只是想让人们能够放大图像，而不产生可能覆盖你内容的额外覆盖或弹出窗口，这是一个有用的功能。放大是基于本教程。
如果你不使用jQuery，那么你可以使用TrySound的香草JS版本。
查看演示»
查看带有移动插件的演示»
观看手风琴内的演示»
观看带有背景图像的演示»
查看CSS动画演示»
查看带有图像地图的演示»
入门
步骤1：链接所需的文件
通过修改magnify.css，您可以完全控制镜头的样式和尺寸。Magnify支持触摸设备，但为了获得更好的变焦体验，您可以通过取消上面最后一行的注释来加载可选的移动插件。如果可能的话，建议在关闭</body>标记之前加载底部的JavaScript文件。
更新：您现在可以从CDNJS加载Magnify。
步骤2：指定大图像
大图像的URI可以放置在data-magnify-src属性中，如下所示，或者在调用.magnify()函数时作为src选项传递（请参阅选项）。
如果未使用data-magnify-src属性或src选项，则Magnify将尝试从父<a>标签中抓取大图像。例子：
注意：大图像需要与主图像具有相同的纵横比。
步骤3：调用.magnify（）函数
请确保这是在加载了步骤1中所需的两个JavaScript文件之后进行的。
用选项调用.magnify()函数：
选项
当调用.magnify()时，可以在JavaScript对象中设置以下选项。
<表格>
名称 类型 默认 描述
srcspeedtimeout-1禁用touchBottomOffset90finalWidthwidth属性设置图像宽度finalHeightheight属性设置图像高度magnifiedWidthmagnifiedHeightlimitBoundstrue，以将图像的边缘保持在放大镜内mobileCloseEvent'click'或'touchend'。此选项仅适用于使用移动插件（jquery.alarge mobile.js）的情况afterLoad还可以通过添加以下数据属性直接在<img>标记中设置选项，这些数据属性将优先于对象内部设置的相应选项：
方法
<表格>
名称 描述
destroy()要使用公共方法，需要将调用.magnify()的元素分配给变量。例子：
事件
放大
在html元素上触发两个自定义事件：进入缩放模式时magnifystart，退出缩放模式时＞122＞。例子：
在缩放模式下，magnifying类也添加到<html>标签中，因此您可以在缩放时更改样式。
镜头样式
可以通过覆盖.magnify > .magnify-lens来更改镜头样式。例子：
安装
从以下方法中进行选择：