layer.photos 相册(图片查看器)实现缩放

【layui】layer弹出图片层(开启图片旋转 放大 缩小 还原) 详细参照layui官网组件弹出图片层(开启图片旋转 放大 缩小 还原)==是layui2.8.16+的新增功能,新增 photos 层的鼠标滚轮缩放功能 ==是layui2.8.16的新增功能,为了不影响我的layui-v2.4.5旧版本使用,我把这一部分单独拿出来写了layphoto.js。 阅读详情

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

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

layui实现预览图片并可以滚动鼠标放大缩小图片 首先通过绑定点击事件来打开图片预览。当点击事件触发时,获取被点击图片的链接和标题。事件,根据鼠标滚动的方向来计算图片的缩放比例,进而调整图片的宽度、高度和位置。方法中,通过传入一个包含图片信息的对象来配置预览的图片,其中包括图片标题和链接。回调函数中,实现了以鼠标位置为中心的滚动放大缩小功能。参数用于指定图片预览的动画效果。来获取相应的元素并进行样式调整。方法来打开图片预览。 阅读详情

相关推荐

Layui图片预览,layer图片预览图片缩放,layui预览图片可放大放小

前言 layer图片预览,并实现缩放 实现 代码复制直接可用 效果图 html中 只要放在layer-photos-demo中的图片都可用预览 <div id="layer-photos-demo"> <div> <img alt="" style="width:100px;" src="image/error.png"> </div> <div> <img alt="" style="width:10

weixin_43992507的博客 6249

Layer弹窗入门(下)

 本课程系统讲解了layer弹窗里的所有方法。逐一进行了分析和讲解。内置方法config全局设置 ready就绪 open核心方法 alert弹框 confirm询问 msg提示 load加载 tips吸附 close关闭层 closeAll关闭全部 style title重置标题 getChildFrame getFrameIndex iframeAuto iframeSrc setTop多层置顶 full/min/restore 其他内置层prompt输入层 tab选项卡层 photos图片层

✨从零搭建 Ubuntu22.04 + Python3.11 + PyTorch2.5.1 GPU Docker 镜像并上传 Docker Hub

构建一个带 GPU 支持的深度学习开发镜像;使用 PyTorch 2.5.1(CUDA 12.4)环境;发布并托管 Docker 镜像至 Docker Hub;验证 GPU 环境正常运行!🎉 这将极大提升你的项目部署效率,尤其是在多人协作或跨平台部署场景中。

用大模型重构生活:猫奴程序员的AI智能日常记录 1578

layer.photos 查看本地图片,并实现缩放和旋转功能

layer.photos 查看本地图片,并实现缩放和旋转功能

Yxh_255的博客 6162

GD32F470实战:如何用EXMC+SDRAM为LVGL打造超大内存池(附完整配置代码)

本文详细介绍了如何利用GD32F470的EXMC接口与SDRAM深度整合,为LVGL构建高性能内存解决方案。通过硬件架构设计、EXMC接口配置、高级内存管理策略及LVGL性能优化技巧,开发者可以突破微控制器内存限制,实现高分辨率显示和复杂动画效果。附完整配置代码,助力嵌入式GUI开发。

rrr55的博客 547

Android应用开发从零到一:基于Kotlin与Jetpack Compose的完整实践指南

移动应用开发的核心在于构建一个架构清晰、可维护且可扩展的应用基础。理解应用架构的原理,如关注点分离和数据驱动UI,是实现高质量应用的关键技术价值。在现代Android开发中,Kotlin语言凭借其空安全特性和协程,能有效提升代码的健壮性与开发效率。Jetpack Compose作为声明式UI框架,代表了UI开发的未来方向,与Kotlin协程深度集成,简化了复杂交互界面的构建。这些技术共同服务于个人任务管理、企业工具等多种应用场景。本文以构建一个完整的个人任务管理应用为例,系统阐述从环境搭建、UI构建、数据持

weixin_32667955的博客 313

layui图片预览进阶:鼠标滚轮控制缩放与旋转功能实现

本文详细介绍了如何为Layui图片预览功能增强交互体验,实现鼠标滚轮控制缩放与图片旋转。通过解析预览层DOM结构,利用JavaScript监听滚轮事件并计算以鼠标为中心的缩放逻辑,同时动态添加旋转按钮并集成CSS3动画,从而在不修改源码的情况下,显著提升后台管理系统等内容审核场景下的操作效率。

alpha的博客 152

Android逆向分析

Android 逆向开发是指对已发布的 Android 应用进行分析和破解,以了解应用程序的内部工作原理,获取应用程序的敏感信息,或者修改应用程序的行为。Android应用 Java编写的,利用Android SDK编译代码,并并且把所有的数据和资源文件打包成一个APK(Android Package)文件这是一个后缀名为.apk的压缩文件,apk文件中包含了一个Anddroid应用程序的所有内容,是Android平台用于安装应用程序的文件。

qq_51598534的博客 6293

LayUI Photos实现图片查看效果并鼠标放大缩小与旋转功能

LayUI Photos实现图片查看效果并鼠标放大缩小与旋转功能

个人记录 4007

ESP32-S3驱动雨滴传感器实战:从原理到ADC/GPIO双模式数据采集

本文详细介绍了ESP32-S3驱动雨滴传感器的实战教程,涵盖其工作原理及ADC/GPIO双模式数据采集方法。通过解析传感器利用水的导电性检测雨量的核心机制,提供了完整的硬件连接方案与软件驱动代码,包括模拟量(AO)的ADC读取和数字量(DO)的GPIO读取,并附有调试技巧,帮助开发者快速实现雨滴检测功能。

weixin_32005771的博客 154

华为/H3C/锐捷交换机配置命令对比表:一张图搞定VLAN划分与端口设置

本文详细对比了华为、H3C、锐捷三大品牌交换机在VLAN划分与端口设置中的配置命令差异,提供从基础配置到高级功能的横向对比表,帮助网络工程师快速掌握多品牌设备混用环境下的配置技巧,提升工作效率。

rust6ferris的博客 699

Layui 内置方法 - layer.photos(相册层)

相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入,如下: $.getJSON('/jquery/layer/test/photos.json', function(json){ layer.photos({ photos: json ,anim: 5 //0-6的选择,指...

阿甘兄 3万+

微信小程序订阅消息实战:如何绕过长期订阅限制实现多次发送(附PHP代码)

本文针对微信小程序开发者无法获取长期订阅消息权限的痛点,提供了一套完整的实战解决方案。通过深入剖析一次性订阅与长期订阅的规则差异,结合巧妙的交互设计、稳健的PHP服务端发送引擎(含高并发处理与失败重试机制)以及授权池管理等高级策略,帮助开发者在合规前提下,构建高可用的消息推送系统,有效提升通知触达率与用户体验。

weixin_29008805的博客 620

layer.photos放大缩小以及旋转

layer.photos放大缩小以及旋转 由于在网上搜到的旋转都多少有些问题,要么是旋转后图片转底层的背景大小不改变导致图片展示不全,要么是连背景一起旋转用起来很不方便,所以我把他调整成了旋转图片并且根据图片旋转后的长宽调整背景层的长宽。 事先准备 替换layer.js中最后一行的content content: '<input type="hidden" id="current"><div class="layui-layer-phimg"><img id="imglayer

糖果贩子的博客 6520

31.华为路由器:PPPOE配置模拟实验及NAT配置

实验环境 pppoe-client上面的接口信息 [AR1]dis ip interface brief *down: administratively down ^down: standby (l): loopback (s): spoofing The number of interface that is UP in Physical is 2 The number of interface that is DOWN in Physical is 1 The number of interface

迷逝 8116

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

layer.photos(options) - 相册层

layer.photos(options) - 相册层 开发工具与关键技术:Visual Studio 前端 作者:盘子 撰写时间:2019年5月 15日 layer.photos(options) - 相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。再看下面是一些关于layui.photos(options)-相册层的总结。 photos支持传入json和直接读...

weixin_44543412的博客 1万+

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

layer.photos放大缩小以及旋转(修复缩放中心点偏移)

不足之处:因为存储旋转状态是用的一个全局变量 current,所以当旋转了第一张图片到90度后,切换到第二张图片,再旋转,会导致第二张图片直接旋转到180度,这个问题,因为使用体验影响不是很大,所以就没有去想办法修正了,有兴趣的小伙伴可以修复后贴代码在评论区哦。在使用layer.photos 时,同事们说,要加个旋转和缩放的功能,在网上寻找了下实现方法,最后参考了上面这个文章的代码。将上面三段js代码 保存在一个js文件中,然后 在页面中引入进来,使用的时候 即可这样使用它。

weixin_51224282的博客 1845

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

Preference:点击没反应?

Preference:点击没反应? 最近在某应用中加了一个Preference: private Preference mSelect; @Override public void onResume() { ... if(mSelect==null) { mSelect=(Preference)findPreference(KEY_SELECT); mSelect.setOnPreferenceChangeListen

m0_52481422的博客 1133

关于layer.photos即照片显示的问题。

在layer组件中,照片显示是不常用,今天做了一些不伤了。 在这里写出来,以备后用。 其中注意几个问题, 1。格式问题。 2.路径问题。 不同的layer有不同的格式,查看layerAPI中发现的格式并能不能很好地运用layer2.1版本(目前最新版)。 另外一定要注意路径问题。这个往往是很多人出错的关键所在。(正常地址最前面是不要斜杠的,后面在原有地址前面增加路径的时候也是在后面加斜...

weixin_34310785的博客 1467

layer.photos 相册层-实现查看大图

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-U

weixin_43761212的博客 1829

使用layer.photo实现点击图片显示大图

    $("body").on("click",".img-list li img",function(e){        layer.photos({ photos: {"data": [{"src": e.target.src}]} });    });

qq_41330414的博客 8511

layer.photos 相册旋转与放大缩小

1.相册旋转: 图层中新增一个旋转按钮 layer.photos({ photos: window['attach_albumlist'], anim: 5, //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) tab:function () { num=0; $("#layui-layer-photos").parent().append('<div style="position:relativ

kk_star的专栏 3109

【layer对话框】iframe内的layer.photos怎样显示在父窗口中

在开发中,对话框显得是不可或缺的组建,而layer作为一款优秀的开源免费的js插件,受到了越来越多的开发者的喜欢关于layer的具体使用,可以参考官网的api,很详细    http://www.layui.com/doc/modules/layer.html    今天在开发中遇到这么一个问题,就是在做后台时,用到了iframe来显示各个不同的页面内容,其中做了做了一个相册,很炫的动画,甚是满意...

等待,就是浪费青春,让代码改变世界 4216

layui图片层(图片浏览)

<div id="layer-photos-demo" class="layer-photos-demo"> <img layer-pid="图片id" layer-src="大图地址" src="缩略图" alt="图片名"> <img layer-pid="图片id" layer-src="大图地址" src="缩略图" alt="图片名"> </div> <script> layer.photos({ pho.

qq_34631220的博客 1081

layui框架学习(27:弹出层模块_其它用法)

学习layui的layer模块中其它函数和参数的基本用法。

gc_2299的博客 1108
上一篇: rem 自适应屏幕解决方案
下一篇: layui 内置方法layer.msg(提示框)
hst❀
博客等级 码龄8年 2364粉丝 147原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值