jquery图片放大插件ZoomIt

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图片放大插件的可用配置参数有：

• 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()：禁用放大效果。

zoomit jquery图片放大插件的github地址为：https://github.com/loganstellway/ZoomIt