推荐两款简单好用的图片放大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插件的更多相关文章
- 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
- 推荐两款好用的反编译工具(Luyten,Jadx)
使用JD-Gui打开单个.class文件,总是报错// INTERNAL ERROR 但当我用jd-gui反编译前面操作获得的jar文件的时,但有一部分类不能显示出来--constants类,仅仅显示 ...
- 推荐两款远程管理Linux工具(基于Windows系统)
推荐两款远程管理Linux工具(基于Windows系统) 1.Xshell 百度百科:Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows ...
- 图片延迟加载jquery插件imgLazyLoading
实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...
- 延迟加载图片的 jQuery 插件:Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...
- Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- 推荐两款PC健康小软件
一.前言 对于经常需要坐在电脑前工作一整天的人来说,健康问题是不得不关注的.下面推荐我一直在用的两款体积非常小(几百KB)的健康小软件,也许可以在无形中保护你.提醒你. 1. FadeTop 这是一款 ...
- 推荐两款Xcode插件:KSImageNamed & ColorSense
之前没怎么接触过Xcode插件,最近发现有人给Xcode做了一些方便编程的插件.今天就推荐两个我个人认为比较好的. 1.KSImageNamed 网站地址 KSImageNamed是一款方便填写图片文 ...
随机推荐
- wpf 加载项目图片的几种写法
new System.Windows.Media.Imaging.BitmapImage( new Uri("pack://application:,,,/TeacherAssistant. ...
- webpack 打包一个简单react组件
安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...
- Spring 使用 SLF4J代替 Commons Logging 写日志 异常
项目的日志更换成slf4j和logback后,发现项目无法启动.错误提示 Caused by: java.lang.NoClassDefFoundError: Lorg/apache/commons/ ...
- Codeforces Round #260 (Div. 2)
A. Laptops 题目意思: 给定n台电脑,第i台电脑的价格是ai ,质量是bi ,问是否存在一台电脑价格比某台电脑价格底,但质量确比某台电脑的质量高,即是否存在ai < aj 且 bi & ...
- 文档ID:某某 模板文件不存在,无法解析文档!
如果是生成栏目列表时出现这样的问题]: 1.可以修改include/arc.listview.class.php这个文件. 2.复制代码 echo "模板文件不存在,无法解析文档 ...
- java基础1_标识符,数据类型
JDK的卸载与安装 : 1 卸载 a 从程序中卸载 控制面板 - 程序和功能 - 卸载JDK; b 删除 C:\Windows\System32 下面的 java javac java ...
- PHP定界符使用技巧
为什么要使用定界符 : 因为PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法——按字符串输出的话,肯定要有大量的转 ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- springMVC+spring+hibernate 框架整合实例
先说一下流程思路: 流程讲解1:首先访问会先定位到控制器.这就用到了过滤器配置文件"spring-mvc.xml".这个文件负责定义控制器的包路径.视图的格式等.其次从" ...
- Python 比较两个字符串大小
python 2中,有cmp(a,b)函数,用于比较两个字符串的大小. 如 >>>a='abc' >>>b='abd' >>>print cmp( ...