layui 可以使点击图片放大

layui可以使图片点击放大,不用在写jquyery了真是很方便。

操作示例

引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/layui.css" />

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/layui.js"></script>

//创建容器

<div id="warranty_image">

@@##@@

</div>

<script>

layui.use(['form', 'table'], function () {

var $ = layui.jquery,

form = layui.form,

table = layui.table;

$("#warranty_image").click(function () {

layer.photos({

photos: {

data: [

{

src: $(this).attr("src")

}

]

},

shade: 0.7

});

})

});

</script>

相关推荐
cg50172 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬4 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200415 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼15 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_092720 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸21 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
纪元A梦31 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生33 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了34 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风39 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试