专栏首页前端小叙推荐两款简单好用的图片放大jquery插件

推荐两款简单好用的图片放大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 条评论
登录 后参与评论

相关文章

  • vuex在页面中以对象展开运算符形式引入报错解决

    当页面中以mapGetters等对象扩展运算符写的时候,会报错 unexpected token 解决如下: babel还要加插件才能解释这个写法 npm i...

    蓓蕾心晴
  • 小程序渲染html的两种方法

    一、使用文档自带的原生API  rich-text, nodes属性直接绑定需要渲染的html内容即可,文档参见这里:https://developers.we...

    蓓蕾心晴
  • 绝对定位多个字居中显示的css

    在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定...

    蓓蕾心晴
  • vscode语言插件设置

    1.语言设置 Windows、Linux 快捷键是:ctrl+shift+p macOS 快捷键是:command + shift + p 搜索:Configo...

    似水的流年
  • 解决IDEA2020.1版本的lombok插件问题

    相信大家更新idea2020.1版本出现之后,发现很多插件无法使用的问题,比如常用的lombok插件无法使用,这里将提供解决方案

    小东啊
  • VSCode前端必备插件,有可能你装了却不知道如何使用?

    在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code。

    桃翁
  • 做一个统计单词数目的Atom插件

    本文是Atom 教程 制作单词计数插件的简化介绍,所有代码都来自这篇文章。如果希望参考详细的文档,请直接查看原文。这篇文章用一个简单的小例子,为我们讲解了如何编...

    乐百川
  • 我写了一款谷歌浏览器插件

    最近一直在看百度云盘上的网课,当想倍速播放的时候却发现没有这个功能。然后就在网上找到了一段可以调整播放速度的 JS 代码。

    壹言
  • ElasticSearch 7.x 简体/繁体搜索

    需求,在搜索简体的时候,应该也能把繁体字搜出来。因为我们一般很少用繁体字进行搜索,所以本篇文章,仅仅从索引层的analyzer的char_filter入手,在索...

    MickyInvQ
  • 从 12.9K 开源项目学到的新东西

    近期我们团队的小伙伴小池同学分享了 “BetterScroll 2.0 发布:精益求精,与你同行” 这篇文章到团队内部群,看到了 插件化 的架构设计,阿宝哥突然...

    前端老王

扫码关注云+社区

领取腾讯云代金券