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

获取方法

相关推荐
灰太狼大大王几秒前
2026 前端基石:HTML5 全景知识体系指南(从入门到架构师思维)
前端
米丘1 分钟前
vue-router 5.x 文件式路由
前端·vue.js
始持1 分钟前
第十五讲 本地存储
前端·flutter
不甜情歌2 分钟前
JS 拷贝:浅拷贝 / 深拷贝原理 + 常用方法
前端·javascript
敲代码的约德尔人2 分钟前
Vue 3 响应式系统完全指南:我在 4 个项目中踩坑后总结的血泪经验
前端·vue.js
始持3 分钟前
第十四讲 网络请求与数据解析
前端·flutter
Roselind_Yi3 分钟前
技术拆解:《从音频到动效:我是如何用 Web Audio API 拆解音乐的?》
前端·javascript·人工智能·音视频·语音识别·实时音视频·audiolm
和科比合砍81分3 分钟前
pnpm:public-hoist-pattern[]配置
前端
我叫黑大帅4 分钟前
Js常用数组处理
前端·javascript·面试
敲代码的约德尔人4 分钟前
React useEffect 完全指南:我在 3 个项目中踩坑后总结的血泪经验
前端·react.js