jQuery图像查看插件Zoom.js

news2024/12/26 2:12:38

效果图

请添加图片描述

图片点击放大,再次点击或者滚动窗口或者按 ESC 键即可恢复原始大小,非常流畅,使用方法也非常简单,引入zoom.js和zoom.css文件之后,对图片添加data-action="zoom"属性即可。

使用方法

1,将 zoom.js 和 zoom.css 文件引入。

<linkhref="css/zoom.css"rel="stylesheet">
<scriptsrc="js/zoom.js"></script>

2,引入transition.js或者bootstrap.min.js

<script src="js/transition.js"></script>

3,对图片添加data-action="zoom"属性。

<img src="img/blog_post_featured.png" data-action="zoom">

附上遍历img标签添加属性代码

$(".post-content img").each(function (){
    $(this).attr("data-action","zoom");
})

获取方法

  • 公众号回复【zoom.js】,公众号名称:【技术人阿杰】
  • CSDN下载地址:jQuery图像查看插件Zoom.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1144030.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【网络】详解http协议

目录 一、认识URLurlencode和urldecode 二、HTTP协议HTTP协议格式HTTP的方法HTTP的状态码HTTP常见Header 一、认识URL URL叫做统一资源定位符&#xff0c;也就是我们平时俗称的网址&#xff0c;是因特网的万维网服务程序上用于指定信息位置的表示方法。 urlencode和urldecode …

21.10 Python 使用CRC32校验文件

CRC文件校验是一种用于验证文件完整性的方法&#xff0c;通过计算文件的CRC值并与预先计算的CRC校验值进行比较&#xff0c;来判断文件是否发生变化&#xff0c;此类功能可以用于验证一个目录中是否有文件发生变化&#xff0c;如果发生变化则我们可以将变化打印输出&#xff0c…

初次学习dubbo记录

---------------------------------------10.17---------------------------------------- 集群和分布式概念 集群&#xff1a;很多"人"做的相同的一件事&#xff0c;即使有一个人挂掉了&#xff0c;也不会对系统造成致命影响 分布式&#xff1a;很多"人"…

外卖小程序:技术实现与关键代码

在当今数字化的餐饮市场中&#xff0c;外卖小程序扮演着重要的角色。这些应用程序通过技术实现点餐、支付和配送&#xff0c;为用户提供方便快捷的服务。下面我们来深入探讨构建外卖小程序的关键技术要点和代码示例。 1. 前端开发 前端是用户与应用程序交互的接口&#xff0…

三年轻量:腾讯云3年轻量2核2G4M服务器366上三年时长

腾讯云轻量应用服务器三年特价&#xff0c;3年轻量2核2G4M服务器&#xff0c;2023双十一优惠价格366元三年&#xff0c;自带4M公网带宽&#xff0c;下载速度可达512KB/秒&#xff0c;300GB月流量&#xff0c;50GB SSD盘系统盘&#xff0c;阿腾云atengyun.com分享腾讯云轻量2核2…

晚上没事干又想利用时间赚钱,那就做副业,不要再懒了

很多朋友白天上班工作不是那么累&#xff0c;晚上下班后又比较空闲&#xff0c;如果一晚上不想被游戏、短视频、电影填满的话&#xff0c;那可以做一些兼职副业来扩宽收入来源&#xff0c;不仅充分利用了时间&#xff0c;还赚取了额外的收入。 晚上能做的兼职副业可太多了&…

AQS 为什么要使用双向链表?

双向链表 双向链表的特点是它有两个指针&#xff0c;一个指针指向前置节点&#xff0c;一个指针指向后继节点。所以&#xff0c;双向链表可以支持 常量 O(1) 时间复杂度的情况下找到前驱结点&#xff0c;基于这样的特点。双向链表在插入和删除操作的时候&#xff0c;要比单向链…

基于STM32两轮自平衡小车系统设计与控制

**单片机设计介绍&#xff0c;1650【毕设课设】基于STM32两轮自平衡小车系统设计与控制 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序文档 六、 文章目录 一 概要 主控芯片用的是100脚的STM32F103VET6&#xff0c;陀螺仪用的是MPU6050&#xff0c;电机…

基础课12——数据采集

数据采集是指从传感器和其它待测设备等模拟和数字被测单元中自动采集非电量或者电量信号,送到上位机中进行分析处理。数据采集系统是结合基于计算机或者其他专用测试平台的测量软硬件产品来实现灵活的、用户自定义的测量系统。采集一般是采样方式,即隔一定时间(称采样周期)对同…

线性表的定义和基本操作

线性表的定义和基本操作 一、线性表的定义 线性表&#xff08;Linear List&#xff09;是具有相同数据类型的n(n>0)个数据元素的有限序列&#xff0c;其中n为表长&#xff0c;当n0时线性表是一个空表。若用L命名线性表&#xff0c;则其一般表示为 L (a1,a2,...,ai,ai1,.…

防止请求重复提交:注解+拦截器的实现方案

文章目录 了解请求重复提交解决思路具体实现 了解请求重复提交 请求重复提交是指用户在一次请求还未处理完成时&#xff0c;重复提交了相同的请求。这种情况通常发生在网络延迟、用户误操作或系统性能不佳等情况下。 请求重复提交可能会导致以下问题和影响&#xff1a; 数据不…

学习笔记:二分图

二分图 引入 二分图又被称为二部图。 二分图就是可以二分答案的图。 二分图是节点由两个集合组成&#xff0c;且两个集合内部没有边的图。换言之&#xff0c;存在一种方案&#xff0c;将节点划分成满足以上性质的两个集合。 性质 如果两个集合中的点分别染成黑色和白色&am…

C语言之 结构体,枚举,联合

目录 1.结构体 1.1结构的基础知识 1.2结构的声明 1.3 特殊的声明 1.4 结构的自引用 1.5 结构体变量的定义和初始化 1.6 结构体内存对齐 1.7 修改默认对齐数 1.8 结构体传参 2. 位段 2.1 什么是位段 2.2位段的内存分配 2.3 位段的跨平台问题 3. 枚举 3.1 枚举类型…

Mybatis简介(二)

1、多表映射 简介一 链接 对于数据库的操作&#xff0c;很多时候我们都是在多表的基础上进行操作的&#xff0c;在这里讲一下多表属性值与列名映射。 案例&#xff1a;这里有一个订单表和一个客户表 CREATE TABLE t_customer (customer_id INT NOT NULL AUTO_INCREMENT, cus…

在 Elasticsearch 中丰富你的 Elasticsearch 文档

作者&#xff1a;David Pilato 对于 Elasticsearch&#xff0c;我们知道联接应该在 “索引时” 而不是查询时完成。 本博文是一系列三篇博文的开始&#xff0c;因为我们可以在 Elastic 生态系统中采取多种方法。 我们将介绍如何在 Elasticsearch 中做到这一点。 下一篇博文将介…

node实战——后端koa结合jwt连接mysql实现权限登录(node后端就业储备知识)

文章目录 ⭐前言⭐ 环境准备⭐ 实现过程⭐ mysql 配置⭐路由前的准备⭐账号注册生成token⭐账号登录生成token⭐token登录 ⭐ 自测过程截图⭐总结⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享关于node实战——后端koa项目配置jwt实现登录注册&#xff08;n…

1230. K倍区间(前缀和)

题目&#xff1a; 1230. K倍区间 - AcWing题库 突破口&#xff1a; 区间遍历枚举一般先枚举右端点&#xff0c;再枚举左端点&#xff0c;注意由右端点限制左端点 思路&#xff1a;1.暴力 #include<cstdio> #include<iostream> #include<algorithm> #incl…

Win 7 VPN拨号错误734.

正在验证用户名和密码错误 734: PPP 链接控制协议终止。 如果您继续收到错误信息&#xff0c;您可以启用日志记录来做分析。 其他电脑拨号都成功.就这个电脑不行.找了很久,修改之后报好成功 ************************** 找到是跟下面两个两个注册表信息有关,尤其是第一个我…

基于Pytest+Requests+Allure实现接口自动化测试!

一、整体结构 框架组成&#xff1a;pytestrequestsallure设计模式&#xff1a; 关键字驱动项目结构&#xff1a; 工具层&#xff1a;api_keyword/参数层&#xff1a;params/用例层&#xff1a;case/数据驱动&#xff1a;data_driver/数据层&#xff1a;data/逻辑层&#xff1a…

75 寻找旋转排序数组中的最小值

寻找旋转排序数组中的最小值 题解1 一次循环(正确理解题意)题解2 二分 已知一个长度为 n 的数组&#xff0c;预先按照 升序排列&#xff0c;经由 1 到 n 次 旋转 后&#xff0c;得到输入数组。例如&#xff0c;原数组 nums [0,1,2,4,5,6,7] 在变化后可能得到&#xff1a; …