当前位置: 首页 > 编程日记 > 正文

推荐两款简单好用的图片放大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插件推荐

转载于:https://www.cnblogs.com/beileixinqing/p/6179897.html

相关文章:

对图像的缩放与旋转

#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" int main( ) {// 读取图像cv::Mat srcImage cv::imread("..\\images\\flower3.jpg");// 图像读取是否成功if( !srcImage.data ) return 1; // 对图像的缩放与旋…

工具库 --- Validator (JS正则)

工具库 --- Validator 今天写的是一个正则验证类 单例模式 工具库地址:github.com/WeForStudy/… npm地址:www.npmjs.com/package/slm… 单例模式 减少不必要的对象生存,减少资源的占用 由于只需要new一次,项目中其他项目共用一个…

【C++】【九】栈的应用

【C】【九】栈的应用 就近匹配原理及其步骤: 中缀转后缀:

linux中错误日志等级

info:仅是一些基本的讯息说明而已;notice:比 info 还需要被注意到的一些信息内容;warning 或 warn:警示讯息,可能有问题,但是还不至于影响到某个 daemon 作。err 或 error :一些重大…

Mat类简略结构

class CV_EXPORTS Mat { public:int flags; // 标志位 int dims ; // 数组的维数int rows,cols; uchar *data ; // 指向数据的指针int * refcount ; // 指针的引用计数器 阵列指向用户分配的数据时,当指针为 NULL };

数据结构之快速排序

首先快速排序:就是选择一个基数,然后从两端依次进行比较,若右边大于基数,则不进行交换,直到右边的数据小于基数,然后冲左边开始和基数比较,若左边的小于基数,则进行下一个比较&#…

【C++】【十】二叉树

树的基本概念&#xff1a; 树具有递归性&#xff0c;非线性 完全二叉树 &#xff1a;所有节点都在 举例&#xff1a; 递归遍历二叉树&#xff1a; #include <stdlib.h> #include <stdio.h> #include <iostream> #include<string.h>typedef struct B…

记一次网络共享打印机故障

刚开始去到办公室发现电脑之间的环境是XP跟WIN10查看共享主机发现没有监听139和445端口 然后在网卡属性把Microsoft网络客户端和Microsoft网络的文件和打印机共享删除重启 重新安装这两个客户端 发现虽然共享主机有监听端口 但是其他主机还是不能访问 最后检查发现主机之间的工…

Mat 类常用函数用法示例

#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #include <iostream> int main( ) {cv::Mat Image1( 10, 8, CV_8UC1, cv::Scalar(5) );// 矩阵行列数获取std::cout << "Image1 row: " << I…

记录智能指针使用shared_ptr使用错误

shared_ptr为智能指针&#xff0c;今天一次在使用shared_ptr时&#xff0c;错误的将其初始化方式写为shared_ptr<T> test shared_ptr<T>(),随后导致崩溃 正确做法是shared_ptr<T> test make_shared<T>() 或shared_ptr<T> test shared_ptr<…

【C++】【十一】二叉树递归遍历与非递归遍历的实现及思路

非递归遍历实现思路&#xff1a; #include <stdlib.h> #include <stdio.h> #include <iostream> #include <string.h>typedef struct LINKNODE {struct LINKNODE* next; }linknode;typedef struct LINKLIST {linknode head;int size; }stack_list;#…

定时调度模块:sched

定时调度模块:sched """A generally useful event scheduler class. 事件调度器类Each instance of this class manages its own queue. 类的每一个实例独立管理自己的队列 No multi-threading is implied; you are supposed to hack that yourself, or use a s…

Mat转换为IplImage 类型和CvMat 类型

cv::Mat img; CvMat cvMatImg img; IplImage IplImg img;转载&#xff1a;http://blog.csdn.net/zhuwei1988

大数据学习思路

学习大数据已经有一段时间了&#xff0c;抽空回顾一下自己学习的一些内容。下图主要为自己学习大数据的一个过程。 阶段一&#xff1a;Java基础 掌握JAVA基本语法、面向对象、集合、IO流、多线程、网络编程 阶段二&#xff1a;MySQL CRUD 阶段三&#xf…

【C++】【十二】排序实现及思路

掌握核心知识点&#xff1a; 1.插入排序在一下2种情况效率较高&#xff1a;1&#xff09;数据基本有序 2&#xff09;数据序列较少 希尔排序是在插入排序的基础上的改进。 2.快速排序 3.归并排序 4.堆排序&#xff1a;数据初始化为数据&#xff0c;根据完全二叉树&#…

Centos 不小心删除了openssl,导致无法使用sshd、yum、wget、curl 等软件的问题。。...

2019独角兽企业重金招聘Python工程师标准>>> 1、如果安装了FTP&#xff0c;可以使用FTP上传rpm到服务器进行安装&#xff1b; 2、挂载光驱cdrom到mnt文件夹下&#xff0c;进入package文件夹rpm进行安装&#xff1b; 3、有源码包进行源码安装&#xff1b; 4、自求多福…

IplImage 类型和 CvMat 类型转换为 Mat 类型

IplImage *IplImg cvLoadImage("fruits.jpg"); Mat img(IplImg, true);转载&#xff1a;http://blog.csdn.net/zhuwei1988

麦当劳数字化转型中获得的6个数据科学经验

摘要 美国大数据公司Civis Analytics于2017年底与麦当劳北美市场营销和数据科学团队建立了数据技术合作伙伴关系&#xff0c;经过一年半的努力&#xff0c;近期在纽约广告周上共同展示了一些重要的学习成果。 麦当劳客户数据科学总监David Galinsky和麦当劳媒体科学经理Emma Hi…

操作系统(三)

学习记录&#xff08;3&#xff09; 线程 1.线程的优势在哪&#xff1f; 1.1 多线程之间会共享同一块地址空间和所有可用数据的能力&#xff0c;这是进程所不具备的。 1.2 线程要比进程更轻量级&#xff0c;由于线程更轻&#xff0c;所以它比进程更容易创建&#xff0c;也更容…

【Kubernetes】两篇文章 搞懂 K8s 的 fannel 网络原理

近期公司的flannel网络很不稳定&#xff0c;花时间研究了下并且保证云端自动部署的网络能够正常work。 1.网络拓扑 拓扑如下&#xff1a;&#xff08;点开看大图&#xff09; 容器网卡通过docker0桥接到flannel0网卡&#xff0c;而每个host对应的flannel0网段为 10.1.x.[1-255…

图像读取、转为灰度图像、均值平滑、显示保存操作

#include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> int main( ) {// 读取图像源cv::Mat srcImage cv::imread("..\\images\\pool.jpg");if( srcImage…

python 查询 elasticsearch 常用方法(Query DSL)

2019独角兽企业重金招聘Python工程师标准>>> 1. 建立连接 from elasticsearch import Elasticsearch es Elasticsearch(["localhost:9200"])2. 查询所有数据 # 方式1&#xff1a; es.search(index"index_name", doc_type"type_name"…

OpenCV 【十一】—— 图像去畸变,对极约束之undistort,initUndistortRectifyMap,undistort

目录 0.极限约束&#xff0c;对极校正 1.摄像机成像原理简述 2.成像畸变 2.1. 畸变数学模型 2.2. 公式推导 3.畸变校正 3.1. 理论推导 4. 图像去畸变** 5. 图像尺度缩放与内参的关系** 5.1 undistortPoints() 5.2 initUndistortRectifyMap() 5.3 undistort() 6.Un…

Ubuntu14.04 Mininet中将Openvswitch升级步骤

2019独角兽企业重金招聘Python工程师标准>>> 首先下载Mininet apt-get install mininetservice openvswitch-controller stopupdate-rc.d openvswitch-controller disablemn --test pingall 这里可能会出现以下错误sudo mn --mac --controllerremote,port6653 --top…

(转)软件测试的分类软件测试生命周期

软件测试的分类&软件测试生命周期 软件测试的分类&#xff1a; 按测试执行阶段&#xff1a;单元测试、集成测试、系统测试、验收测试、&#xff08;正式验收测试&#xff0c;Alpha 测试-内侧&#xff0c;Beta 测试-公测&#xff09; 按测试技术分类&#xff1a;黑盒测试、白…

OpenCV 【十二】OpenCV如何扫描图像、利用查找表和计时

目录 OpenCV如何扫描图像、利用查找表和计时 1.函数计算时间测试case 2. Mat图像的存储机理 3. 像素遍历的3--4种方式 4. 实例 OpenCV如何扫描图像、利用查找表和计时 如何计算函数运行时间&#xff1f; Mat图像如何存储&#xff1f; 如何高效遍历图像像素&#xff1f; …

Java String.split()用法小结

2019独角兽企业重金招聘Python工程师标准>>> 在java.lang包中有String.split()方法,返回是一个数组 我在应用中用到一些,给大家总结一下,仅供大家参考: 1、如果用“.”作为分隔的话,必须是如下写法,String.split("\\."),这样才能正确的分隔开,不能用Strin…

217. 验证码 demo

2019独角兽企业重金招聘Python工程师标准>>> 1.效果 2.准备&#xff1a; 下载相关的jar 这里我使用的是ValidateCode 这个jar https://my.oschina.net/springMVCAndspring/blog/1815719 &#xff08;1&#xff09;相关jar下载路径 链接&#xff1a;https://pan.…

OpenCV 【十三】矩阵的掩码操作

目录 1 Mask掩膜/滤波核 1.1 原理 1.2 实例 1.3 结果对比 2. filter2D函数 2.1 原理 2.2 实例 2.3 结果 1 Mask掩膜/滤波核 1.1 原理 矩阵的掩码操作很简单。其思想是&#xff1a;根据掩码矩阵&#xff08;也称作核&#xff09;重新计算图像中每个像素的值。掩码矩阵中…

【ArrayList】为什么java.util.concurrent 包里没有并发的ArrayList实现?

2019独角兽企业重金招聘Python工程师标准>>> 为什么java.util.concurrent 包里没有并发的ArrayList实现&#xff1f; 问&#xff1a;JDK 5在java.util.concurrent里引入了ConcurrentHashMap&#xff0c;在需要支持高并发的场景&#xff0c;我们可以使用它代替HashMa…