前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >推荐两款简单好用的图片放大jquery插件

推荐两款简单好用的图片放大jquery插件

作者头像
蓓蕾心晴
发布2018-04-12 13:25:00
4.9K0
发布2018-04-12 13:25:00
举报
文章被收录于专栏:前端小叙前端小叙

一、zoomfiy.js

推荐可以从这里下载

使用说明:

使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序都可 js里加入 调用插件的函数 $('这里写要放大的图片').zoomify(); 如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数。

二、zoomooz.js

推荐这里下载

使用说明:

这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站。这个图片方法不是 单独图片跳脱出来的放大,而是点击该图片区域,这个区域的页面整体放大,有时候会导致放的的区域不准的情况。点击图片其他部分可以回到要放大的内容之前的状态,效果很炫酷。 必须引用一定有jquery和zoomooz.js 给要放大的元素加 class="zoomTarget" 即可实现简单的放大功能, 如果实现更加复杂的功能, 要在他的父级等标签上继续加 不同的class ,加一些js ,具体参见说明文档

以上两个插件是我试过众多插件中最好用最简单的,还有许多其他图片放大插件,有兴趣的朋友可以学习下。

比如:

swipebox

该插件好处:有具体的使用说明文档,貌似是要给点击的图片加一个a标签,在a标签上加相应的class。

zoom.js

该插件使用起来非常简单,直接给需要放大的图片加一个 data-action="zoom"即可,但是很多时候会报错:Cannot read property 'end' of undefined 和 Cannot read property '0' of undefined 

具体报错原因,目前还不明白,在本身项目结构复杂的时候应用最容易出现该错误,导致图片点击出现一点小小的Bug.

缺点:没有帮助文档,网上搜不到相关帖子

优点:适用于简单页面的图片放大,效果棒!

fancybox

该插件功能齐全,值得研究

点击这里有一些jquery插件推荐

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-12-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档