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

时间:2022-01-09 12:20:49

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

推荐两款简单好用的图片放大jquery插件的更多相关文章

  1. 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

  2. 推荐两款好用的反编译工具(Luyten,Jadx)

    使用JD-Gui打开单个.class文件,总是报错// INTERNAL ERROR 但当我用jd-gui反编译前面操作获得的jar文件的时,但有一部分类不能显示出来--constants类,仅仅显示 ...

  3. 推荐两款远程管理Linux工具(基于Windows系统)

    推荐两款远程管理Linux工具(基于Windows系统) 1.Xshell 百度百科:Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows ...

  4. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

  5. 延迟加载图片的 jQuery 插件:Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  6. Lazy Load&comma; 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. 另外一款超棒的响应式布局jQuery插件 – Freetile&period;js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  8. 推荐两款PC健康小软件

    一.前言 对于经常需要坐在电脑前工作一整天的人来说,健康问题是不得不关注的.下面推荐我一直在用的两款体积非常小(几百KB)的健康小软件,也许可以在无形中保护你.提醒你. 1. FadeTop 这是一款 ...

  9. 推荐两款Xcode插件:KSImageNamed &amp&semi; ColorSense

    之前没怎么接触过Xcode插件,最近发现有人给Xcode做了一些方便编程的插件.今天就推荐两个我个人认为比较好的. 1.KSImageNamed 网站地址 KSImageNamed是一款方便填写图片文 ...

随机推荐

  1. How to Operate SharePoint User Alerts with PowerShell

    When you migrate list or site, the user alerts in the site will not be migrated together with the co ...

  2. 在&period;NET中实现彩色光标&sol;动画光标和自定义光标&lbrack;转&rsqb;

    下面是完整的例子,可以通过命令行编译即可看到效果. Test.cs using System; using System.Drawing; using System.Windows.Forms; us ...

  3. xmpp搭建服务器

    二.环境配置1.安装mysql2.修改mysql的帐户的密码>sqlite(移动平台) ,是没有密码直接连接数据库>mysql sqlServer (服务端的数据库) 是有帐户和密码  默 ...

  4. 细说SQL性能优化

    1:在进行多表关联时,多用where语句把单个表的结果集最小化,多用聚合函数汇总结果集后再与其它表做关联,以使结果集数据量最小化2:在两张表进行关联时,应考虑可否使用右连接.以提高查询速度3:使用wh ...

  5. 【HDOJ】1892 See you~

    wa了十次,原来变量名写错.二维树状数组. #include <cstdio> #include <cstring> #define MAXN 1002 int nums[MA ...

  6. VI 命令学习指南

    ctrl+b 屏幕向后(上)移动一屏 ctrl+f 屏幕向前(下)移动一屏 ctrl+u 屏幕向后(上)移动半屏 ctrl+d 屏幕向前(下)移动半屏

  7. JavaScript中的trim自定义

    先直接贴代码 String.prototype.trimfy=function (val){ var demo=String(this); if(demo.indexOf(val)>=0){ i ...

  8. PAT 1054 The Dominant Color

    1054 The Dominant Color (20 分)   Behind the scenes in the computer's memory, color is always talked ...

  9. 【转】使用程序修改系统&lpar;IE&rpar;代理设置

    文章都是发布在github再转到这边的,这边格式可能会乱掉.博客地址:benqy.com 这是本人在做的一个前端开发调试工具(HttpMock),功能是web服务器+http日记+http代理(类似f ...

  10. 安装Memcache的PHP扩展

    查看memcached是否启动 # ps -ef | grep memcached 安装Memcache的PHP扩展 1.在http://pecl.php.net/package/memcache 选 ...