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

获取方法

相关推荐
RainbowSea5 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴10 分钟前
笨方法学python -练习14
java·前端·python
Mintopia17 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖21 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia27 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农32 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye35 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤39 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子43 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html