点击图片查看原图（图片按比例展示，点击旋转）

使用layer弹框：实现点击图片查看原图的效果；

引入layer，函数封装：

// 点击图片查看大图
function showBigImage(e) {let src = $(e).attr('src');let img = new Image();img.src = src;let w = img.width;let h = img.height;let windowW = window.screen.availWidth;let windowH = window.screen.availHeight;let width,height,imgArea;width = windowW * 0.7 + 'px';height = windowH + 'px';if(w >= h){imgArea = 'width:' + windowW * 0.7 + 'px';}else if(w < h){imgArea = 'height:' + windowH * 0.9 + 'px';}layui.use(['layer'], function () {var layer = layui.layer;var imgLayer;if (parent.layer) {imgLayer = parent.layer;} else {imgLayer = layer;}imgLayer.open({type: 1,title: false,closeBtn: 1,shadeClose: true, //点击阴影关闭area: [ width,height ], //宽高content: `<img style="${imgArea};margin:0 auto;display:block;" src="${src}" οnclick='xz()' class="big-img" title="点击图片旋转"/><script type="text/javascript">let d = 0function xz(){d -= 90$('img.big-img').css('transform','rotate('+d+'deg)')}</script>`});});
}

函数调用：

<img onclick="showImage(this);" src="/xxx/xxx" alt="">

点击图片查看原图（图片按比例展示，点击旋转）相关推荐

jquery实现点击小图片查看大图片
jquery实现点击小图片查看大图片 PS:绝大部分参考网上的代码,自己进行了部分改善,没使用 $("< img/ >").attr().load(function{} ...
jQuery 实现点击图片查看原图
分析:点击小图片,展示大图片.蒙版.删除(x):点击删除(x),隐藏大图片容器原理:通过事件代理获取到img的src,赋值到大图片的src中,再显示大图片的容器(蒙版):点击 "X&quo ...
Android 天气APP（二十九）壁纸设置、图片查看、图片保存
上一篇:Android 天气APP(二十八)地图搜索定位效果图开发流程一.前情提要二.正式开发 1. 列表数据填充 2. 浮动按钮的交互 3. 其他优化 4. 运行效果图三.文末一.前情提 ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
android今日头条图片查看效果,图片查看器ImageViewer：轻松实现微信朋友圈、今日头条、横向列表、纵向列表等图片浏览效果...
ImageViewer 关于图片浏览器,支持图片手势缩放.拖拽等操作,自定义View的模式显示,自定义图片加载方式,可自定义索引UI与加载进度UI,更加灵活,易于扩展,同时也适用于RecyclerV ...
java swing awt绘制一个图片查看器图片显示图片控件
感谢 java图片查看器的代码 java似乎没有一个名字叫图片控件的控件,使用swing 的Label显示图片他的代码如下: package swing.draw; import java.aw ...
android 图片查看动画,Android 共享动画实现点击列表图片跳转查看大图页面
主要内容使用系统提供的 API 实现共享动画在实现过程中遇到的问题图片点击和关闭之后会出现短暂的黑屏问题实现的动画效果如下: 共享动画.gif 具体实现这个效果是在两个页面之间的切换动画,既然是两个 ...
弹出查看图片_报表工具如何实现“点击查看原图”
在各种涉及图片的 Web 网站上,无论是搜图类.社交类.保险服务类,以及 ERP 或档案管理等内部系统,其中对于图片通常会提供一种点击图片查看原图的操作,也就是一开始呈现小图,点击后放大查看.这种操作 ...
HTML5点击图片查看大图,科技常识：HTML5 实现图片预览和查看原图
今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图的相关资料,希望小伙伴们看了有所帮助. htm ...

点击图片查看原图（图片按比例展示，点击旋转）

引入layer，函数封装：

函数调用：

点击图片查看原图（图片按比例展示，点击旋转）相关推荐

最新文章

热门文章