layer.photos 相册（图片查看器）实现缩放

落日映苍穹つ 2023-07-01 08:34 5阅读 0赞

2019年4月12日 layer版本 layer-v3.1.1

layer.photos 方法在使用过程中发现没有通过鼠标中键（滚轴）实现图片缩放功，故通过搜索引擎找到如下方法

需要引用 jquery

$(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function (e) { 
           var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
               (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
           var imagep = $(".layui-layer-phimg").parent().parent();
           var image = $(".layui-layer-phimg").parent();
           var h = image.height();
           var w = image.width();
           if (delta > 0) { 
               if (h < (window.innerHeight)) { 
                   h = h * 1.05;
                   w = w * 1.05;
               }
           } else if (delta < 0) { 
               if (h > 100) { 
                   h = h * 0.95;
                   w = w * 0.95;
               }
           }
           imagep.css("top", (window.innerHeight - h) / 2);
           imagep.css("left", (window.innerWidth - w) / 2);
           image.height(h);
           image.width(w);
           imagep.height(h);
           imagep.width(w);
       });

此方法可以实现鼠标中键（滚轴）缩放，但是在实际项目中还是相册功能不符合：切换图片的箭头，在图片内显示，也即是说箭头总是跟随图片的变化而变化。

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关图片缩放

- (UIImage )scaleToSize:(UIImage )img size:(CGSize)size{ // 创建一个bitmap的conte

系统管理员/ 2023年10月16日 20:23/ 0 赞/ 33 阅读

相关图片焦点缩放

放大和缩小某个对象可能希望焦点锁定在特定位置。例如看一张照片，假设照片的(0,0,0)在中心位置，我们来放大脸部。如果只是Scale放大，Postion并没有变化，导致图

左手的ㄟ右手/ 2023年10月08日 09:59/ 0 赞/ 78 阅读

相关 layer.photos 相册（图片查看器）实现缩放

2019年4月12日 layer版本 layer-v3.1.1 layer.photos 方法在使用过程中发现没有通过鼠标中键（滚轴）实现图片缩放功，故通过搜索引擎找到如下方

落日映苍穹つ/ 2023年07月01日 08:34/ 0 赞/ 6 阅读

相关缩放图片代码

- ( UIImage \)imageWithImageSimple:( UIImage \)image scaledToSize:( CGSize )newSize\{

￡神魔★判官ぃ/ 2022年08月22日 06:26/ 0 赞/ 298 阅读

相关 Android实现支持缩放平移图片

本文主要用到了以下知识点 1. Matrix 2. GestureDetector 能够捕捉到长按、双击 3. ScaleGestureDetector 用于检测缩

妖狐艹你老母/ 2022年07月24日 09:06/ 0 赞/ 224 阅读

相关 js图片缩放

感谢：https://zhidao.baidu.com/question/499471536.html 记录下关键代码： <html> <head

谁践踏了优雅/ 2022年07月14日 06:51/ 0 赞/ 340 阅读

相关 vue 图片查看器(可缩放，翻上下一页等)使用

[NPM][] 1.安装 npm install vue-photo-preview --save 2.main.js引入 import preview

╰半夏微凉°/ 2022年03月30日 03:22/ 0 赞/ 425 阅读

相关 UIScrollView结合UIImageView实现图片缩放

实现UIImageView的图片缩放功能，需要结合UIScrollView实现。示例代码 // 定义缩放比例 CGFloat scaleMini = 1.

古城微笑少年丶/ 2022年03月28日 13:52/ 0 赞/ 267 阅读

相关 java 图片缩放

/\\ \ @Title: ImageUtils \ @Description: 调整图片大小 \ @author TimB

ゝ一世哀愁。/ 2022年03月26日 08:20/ 0 赞/ 421 阅读

相关 Glide 图片缩放

CenterCrop CenterCrop()会缩放图像，完全填充到 ImageView 界限内并且裁剪额外的部分，图像可能不会完整显示。 Glide.with

灰太狼/ 2022年02月04日 09:59/ 0 赞/ 440 阅读