jquery图片放大插件ZoomIt

当前位置:主页 > jQuery库 > 图片效果 > jquery图片放大插件ZoomIt
jquery图片放大插件ZoomIt
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:01-10
    阅读:
简要教程

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