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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!