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

获取方法

相关推荐
美狐美颜sdk2 小时前
跨平台直播美颜sdk集成攻略:Android、iOS与Web的统一方案
android·前端·ios
Airser2 小时前
npm启动Taro框架报错
前端·npm·taro
Anlici3 小时前
连载小说大学生课设 需求&架构
前端·javascript·后端
乘风!4 小时前
前端Jquery,后端Java实现预览Word、Excel、PPT,pdf等文档
pdf·word·excel·jquery
i源4 小时前
Java语言处理Js文件内容格式化
java·javascript
2501_938769994 小时前
React Server Components 进阶:数据预取与缓存
前端·react.js·缓存
“负拾捌”5 小时前
基于NodeJs实现一个MCP客户端(会话模式和无会话模式)
javascript·ai·node.js·大模型·mcp
蒜香拿铁5 小时前
Angular【基础语法】
前端·javascript·angular.js
xiaoxiao无脸男5 小时前
纯css:一个好玩的按钮边框动态动画
前端·css·css3
rookie_fly5 小时前
基于Vue的数字输入框指令
前端·vue.js·设计模式