简要教程

ZoomIt.js是一款jquery图片放大插件。该 jquery图片放大插件在鼠标经过或悬停在图片上时，使用高清大图来代替缩略图。移动鼠标可以查看高清大图的各个部分内容。

 安装

可以通过npm或bower来安装zoomit图片放大插件。

bower install --save zoomit

npm install --save zoomit        

 使用方法

在页面中引入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图片放大插件的可用配置参数有：

o img：要进行放大的图片对象，一个jquery对象。

o src：一个字符串，或一个能返回字符串的函数。该字符串指向高清大图的url地址。

o class：包含插件中要用到的class类的对象。

o container：容器的class类。默认为zoomit-container。

o loaded：当大图被加载后添加的lclass类。默认为loaded。

o img：被放大图片元素的class类，默认为zoomit-zoomed。

o ghost：图片复制元素的class类，默认为zoomit-ghost。

 事件

zoomit图片放大插件的可用事件有：

o onZoomIn：图片被放大时的回调函数。

o onZoomOut：图片取消放大时的回调函数。

o onClick：当放大区域被点击时的回调函数。

o onInit：插件初始化时的回调函数。

 方法

zoomit图片放大插件的可用方法有：

o enable()：使放大效果可用。

o disable()：禁用放大效果。

本文由职坐标整理发布，学习更多的jQuery相关知识，请关注职坐标WEB前端jQuery频道！