jQuery图像查看插件Zoom.js

效果图

图片点击放大,再次点击或者滚动窗口或者按 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标签添加属性代码

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

获取方法

相关推荐
艾伦野鸽ggg3 分钟前
JavaScript 原型链与原型对象详解
javascript·原型模式
paopaokaka_luck13 分钟前
非遗文物数字化系统(AI非遗问答、ONNX图像识别、协同过滤推荐、ECharts数据分析、非遗知识浏览与互动、文创商城订单闭环、文化活动报名签到、社区交流)
前端·javascript·vue.js·人工智能·数据分析·echarts
乘风gg16 分钟前
AI Coding 提效 2 倍是真的吗?到底怎么衡量效果
前端·ai编程·claude
用户9210802628617 分钟前
从对象到原型链:理解 this、构造函数和 new
前端
猫不易23 分钟前
Webpack 与 Vite:从 Loader / Plugin 到 Rolldown 统一引擎
前端·vite
YHL34 分钟前
🎯 Danci —— 用 AI 驱动开发一个全栈英语单词学习平台
前端·后端
平头哥~35 分钟前
Day 20 _ 3D 翻卡_perspective 写错人,卡片就穿帮
前端·3d·css3·学习资料
小聪70844 分钟前
elpis-core 前端 Webpack 工程化实践
前端
2601_9539880744 分钟前
Ricon组态实时监控 - 毫秒级数据可视化
前端·物联网·数学建模·信息可视化·架构·前端框架
mONESY1 小时前
让大模型「听话」输出 JSON:LangChain OutputParser 结构化输出实战,从手写正则到 Zod Schema 四层进化
javascript