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

一、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插件推荐

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

CSS入门1-认识html之标签

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1102
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3525
来自专栏守望轩

Visual Studio 2008 每日提示(六)

#051、循环使用剪贴薄里粘贴的不同内容 原文地址:http://blogs.msdn.com/saraford/archive/2007/10/01/did...

34610
来自专栏闻道于事

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-/...

1.5K6
来自专栏惶心 - 技术博客

为博客标题自定义字体

最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。(其实我的博客也弄了只不过他们不看而已)。

4164
来自专栏小狼的世界

Vimperator的有用操作

可以有一个变通的办法复制,先按下"Ctrl+V",然后再用快捷键复制,接下来Vim的快捷键又起作用了。现在还有一个困惑的地方是不用鼠标,如何选中网页中自己希望的...

923
来自专栏coding

vue.js组件间通信

组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

941
来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

1152
来自专栏惶心 - 技术博客

Grouper.html: 分享群组的最佳方式

之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个...

1726
来自专栏菩提树下的杨过

图片的javascript延时加载

在页面很长(超过3屏)且图片又很多时,默认情况下浏览器会加载所有图片,有可能导致第二屏的图片显示出来了,但第一屏的图片还在加载,这种情况最适合用"javascr...

2226

扫码关注云+社区

领取腾讯云代金券