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");
})

获取方法

相关推荐
Ticnix12 分钟前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人15 分钟前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl19 分钟前
OpenClaw 深度技术解析
前端
崔庆才丨静觅22 分钟前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人30 分钟前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼34 分钟前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空37 分钟前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_42 分钟前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus1 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空1 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范