Zoomify实现图片点击放大(显示原图)功能

之前要给博客加一个点击图片放大的功能，也就是下面这个效果

找了几个之后找到了现在用的这个，Zoomify，GitHub地址：Zoomify

要是习惯看英文，可以直接看GitHub，写的很清楚，不想看英文，就接着往下看


使用


GitHub下载后把dist文件夹下的两个文件放入项目静态文件夹
(还需要引入jQuery)

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/vendor/zoomify/dist/zoomify.min.js"></script>
<link href="css/vendor/zoomify/dist/zoomify.min.css" rel="stylesheet">

使用

$('img.myImage1').zoomify(); // 默认参数，回调相当于toggle
$('img.myImage2').zoomify({ duration: 1000 }); // 过度持续1秒

zoomify()属性可选值


属性值类型默认值描述
duration整数200过度持续的毫秒数
easing字符串"linear"过度样式名称
scale浮点数0.9如果图像大于页面的大小，图像相对页面宽度/高度的最大缩放尺度(从0到1)

举例

$('img.myImage2').zoomify({ duration: 3000，scale：0.6 }); // 过度持续1秒，最大60%

zoomify()可选方法


事件描述
zoom根据图片状态执行放大或缩小（相当于toggle）
zoomIn缩小图片
zoomOut放大图片
reposition计算图片位置并将其移动到页面可见位置

举例

$('img.myImage2').zoomify("zoomIn"); //执行缩小图片

zoomify()可选事件（事件回调）


事件描述
zoom-in.zoomify图片缩小前执行
zoom-in-complete.zoomify图片缩小后执行
zoom-out.zoomify图片放大前执行
zoom-out-complete.zoomify图片放大后执行
$('#myImage').on('zoom-in.zoomify', function () {
    // do something...
});

本文为原创文章，转载无需和本人联系，但请注明来自 飞行猿博客 https://www.hzfblog.com

飞行猿博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论