银狐给网站改用了新的图片放大jq插件:zoomfiy,简单简洁。原来使用的zoom在移动端有bug,zoomfiy则没有。
zoomfiy.js
下载地址:http://www.htmleaf.com/jQuery/Lightbox-Dialog/201606193618.html
使用方法
使用该图片放大预览插件需要在页面中引入 jquery
和 zoomify.min.js
以及样式文件 zoomify.min.css
。
<link href="path/to/dist/zoomify.min.css" rel="stylesheet">
<script src="path/to/jquery-2.1.4.min.js"></script>
<script src="path/to/dist/zoomify.min.js"></script>
zoomooz.js
下载地址:http://www.oschina.net/p/zoomooz?fromerr=WiAVwEHF
使用说明:
Zoomooz.js 是一个易用的 jQuery 插件让网页的元素可进行优雅的缩放操作,特别适用相册网站。
这种图像方法不是单独放大单个图像,而是单击图像区域将整个放大该区域,有时会导致该区域放大的位置不正确。
点击图像的其他部分可以返回到要放大内容之前的状态,效果非常好。需要引用jquery和zoomooz.js,以实现简单的图片放大功能。如果想要实现更复杂的功能,要在父级等标签上加上不同的class和js。具体看说明文档
以上两个插件是我尝试过的众多插件中最好,最简单的,还有许多其他图像放大插件 感兴趣的朋友可以了解下。
比如:
swipebox
插件优点:有具体的使用说明文档,要给点击的图片加一个a标签,且在a标签上加相应的class。
zoom.js
该插件使用非常简单,只需在需要放大的图像上添加一个 data-action="zoom"
就行了,但是很多时候会报错或者移动端没法正常放大
目前尚不清楚该错误的具体原因。
当项目结构复杂时,更容易出现错误,导致单击图像时会出现了小小的bug。
缺点:没有帮助文档,无法找到相关文章(有相关文章,而且很详细)
优点:适用于放大简单页的img放大,效果还是很不错的!
fancybox
插件优点:功能齐全,值得研究