图片点击放大,适用所有页面 JavaScript 401 fly 2021-04-12 18:00:12 图片点击进行放大,适用所有页面,不限制图片的宽高,进行自适应 1 引入css文件(自行修改路径) <link rel="stylesheet" th:href="@{/../layuiadmin/style/comentpage.css}" media="all"> 2 引入js文件(自行修改路径) <script th:src="@{/layuiadmin/layui/commentpage.js}"></script> 3 添加html dom元素 <div class= "asas77"> <img src=""> </div> 4 附件css //comentpage.css .asas77 { border: 1px solid #ccc; width: auto; height: auto; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); max-height: 400px; max-width: 1200px; overflow: auto; display: none; z-index: 222; } 5 js ```javascript // js 文件代码 $(function () { //自动添加替换图片 $("img").each(function() { $(this).on('click',function (e) { $('.asas77 img').attr('src', $(this).context.src); $('.asas77').show() }) }); $('.asas77').on('click',function () { $('.asas77').hide() }); }) 图片点击放大后 ```! 图片点击前初始样式 [图片点击](/upload/1618221603653.png "图片点击")