图片/图形
ZoomIt 图片放大jQuery插件
PetitQ
ZoomIt.js 是一款 jquery 图片放大插件。该 jquery 图片放大插件在鼠标经过或悬停在图片上时，使用高清大图来代替缩略图。移动鼠标可以查看高清大图的各个部分内容。
使用方法
在页面中引入 zoomit.css，jquery 和 zoomit.js 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" media="all" href="dist/styles/zoomit.css" />
<script src="dist/scripts/jquery.min.js"></script>
<script src="dist/scripts/jquery.zoomit.min.js"></script>
HTML 结构
为要进行放大的图片添加 data-zoomed 属性。
<img id="zoomit-target" src="path/to/small.jpg" data-zoomed="path/to/large.jpg" alt="Image To Zoom">
初始化插件
使用下面的方法来初始化该 jquery 图片放大插件。
<script type="text/javascript">
$('#zoomit-target').zoomIt();
</script>
或者你也可以把它作为 jquery 插件来使用。
$('#editSection').tuiEditor({
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '300px'
});
配置参数
zoomit 图片放大插件的可用配置参数有：
img：要进行放大的图片对象，一个 jquery 对象
src：一个字符串，或一个能返回字符串的函数。该字符串指向高清大图的 url 地址
class：包含插件中要用到的 class 类的对象：
container：容器的class类。默认为zoomit-container
loaded：当大图被加载后添加的lclass类。默认为loaded
img：被放大图片元素的class类，默认为zoomit-zoomed
ghost：图片复制元素的class类，默认为zoomit-ghost
事件
zoomit 图片放大插件的可用事件有：
onZoomIn：图片被放大时的回调函数
onZoomOut：图片取消放大时的回调函数
onClick：当放大区域被点击时的回调函数
onInit：插件初始化时的回调函数
方法
zoomit 图片放大插件的可用方法有：
enable()：使放大效果可用
disable()：禁用放大效果
Github 地址：https://github.com/loganstellway/ZoomIt
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
