layui的layer.open()方法查看缩略图 原图缩放
写在前面
需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.
操作步骤
官方文档
关键属性
1. type: 设置type=1, 以页面的形式展示图片
2. content: 设置content即页面中的内容
3. offset: 设置页面(图片)的展示坐标
4. area: 设置展示区域宽高 auto-自适应
看到这里, 可以联想到将type设置为1-页面, content设置成<img>标签然后把图片src传进来就可以展示图片了.
接下来是设置图片显示的坐标(offset属性), 以及图片展示区域大小(area属性), 图片的宽高其实可以在<img>标签中动态拼接.
关键代码
// 浏览器窗口width height均/4 设置为图片展示的左上角坐标
var x = document.documentElement.clientWidth/4;
var y = document.documentElement.clientHeight/4;
// 图片的src
var src = obj.src; // 图片宽高/3 即缩放为原图片大小的1/3
var width = obj.naturalWidth/3;
var height = obj.naturalHeight/3; // 拼接img标签 设置width height src属性值
var img_show = "<img width='" + width + "' height='" + height + "' border='0' src='" + src + "' />";
bigImgIndex = layer.open({
content:img_show,
type:1,
offset:[y+"px",x+"px"],
title:false,
area:['auto','auto'],
shade:0,
closeBtn:0
});
实际代码
/*
* 鼠标放在图片上方,显示大图
*/
var bigImgIndex = null;
function tipImg(obj,level){
try{
var navigatorName = "Microsoft Internet Explorer";
if( navigator.appName != navigatorName ){
if(obj.nodeName == 'IMG'){
var e = window.event;
// var x = e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft
// var y = e.clientY+document.body.scrollTop + document.documentElement.scrollTop
var x = document.documentElement.clientWidth/4;
var y = document.documentElement.clientHeight/4;
var src = obj.src;
// var width = obj.naturalWidth;
// var height = obj.naturalHeight;
var width = obj.naturalWidth/3;
var height = obj.naturalHeight/3;
var curlayer;
if(!level){
curlayer = layer;
}else if(level==1){
curlayer = parent.layer;
} var img_infor = "<img width='" + width + "' height='" + height + "' border='0' src='" + src + "' />";
bigImgIndex = curlayer.open({
// content:[src,'no'],
content:img_infor,
// type:2,
type:1,
offset:[y+"px",x+"px"],
title:false,
// area:[width+"px",height+"px"],
area:['auto','auto'],
shade:0,
closeBtn:0
}); }
}
}catch(e){
} }
效果图
个性化
以上只是个人修改的结果, 需求不一样的可以作相应调整, 不再赘述了.
感谢
layui的layer.open()方法查看缩略图 原图缩放的更多相关文章
- layui(二)——layer组件常见用法总结
layer是layui的代表作,功能十分强大,为方便以后快速配置这里对其常见用法做了简单总结 一.常用调用方式 //1.普通消息:alert(content,[options],[yesCallBac ...
- layui时间,table,大图查看,弹出框,获取音频长度,文件上传
1.引入: <link href="../../Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" ...
- layui与layer同时引入冲突的问题
之前在项目中只有用layer,但是后来有用到了layui,结果发现同时引入这两个东东 会出现冲突的问题 导致代码运行不正常 后来网上找到了解决办法: 学习源头:http://fly.layui.com ...
- layui常见弹窗使用方法
1:confim类型使用方法 layui.use('layer', function(){ layer.confirm('是否立即上传卷宗信息?', { btn: ['是','否'], t ...
- layui之layer打开table后分页无效的解决方法
1.原代码: <body> <div id="showalladdableavms" style="display: none;width:100%&q ...
- Caffe 不同版本之间layer移植方法
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52185521 (前两天这篇博客不小心被 ...
- JS中通过LayUI的layer.prompt弹出文本输入层,多个按钮回调获取输入值
JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...
- 拼接html不显示layui进度条解决方法
最新有个新需求,要异步拼接html并渲染数据,并且我这边是用layui的flow.load(流加载)渲染多个进度条.按官网给出的 element.progress('demo', n+'%'); 就是 ...
- 三种方法查看MySQL数据库的版本
1.使用-V参数 首先我们想到的肯定就是查看版本号的参数命令,参数为-V(大写字母)或者--version 使用方法: D:\xampp\mysql\bin>mysql -V 或者 D:\xam ...
随机推荐
- MySQL高可用架构应该考虑什么? 你认为应该如何设计?
一.MySQL高可用架构应该考虑什么? 对业务的了解,需要考虑业务对数据库一致性要求的敏感程度,切换过程中是否有事务会丢失 对于基础设施的了解,需要了解基础设施的高可用的架构.例如 单网线,单电源等情 ...
- tac命令以及各种linux文件查看命令
有许多命令都可以查看文件,不同的命令有不同的优点,可以针对不同的需要分别选择命令以提高效率: cat 由第一行开始显示内容,并将所有内容输出 tac 从最后一行倒序显示内容 ...
- 【转】vsftpd用户登入不进去问题
实在是登陆不上... 我已经加了一个新的用户UID和GID都设置到1000以后 /etc/vsftpd.conf也加了local_enable=yes 以standalone模式运行. 重启服务器后, ...
- cnetos7安装mysql并开启慢日志查询
参考博客地址https://www.cnblogs.com/luyucheng/p/6265594.html 安装部署(5.7) #下载Yum Repository curl -O https://r ...
- MySQL/MariaDB数据库的索引工作原理和优化
MySQL/MariaDB数据库的索引工作原理和优化 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 实际工作中索引这个技术是影响服务器性能一个非常重要的指标,因此我们得花时间去了 ...
- 如何将scratch3.0的作业自动提交到后台数据库
大家都知道Scratch3.0开发后,默认是可以下载文件到电脑,但是如果是作为商业系统来说,我们需要将作业自动的提交到后台,因此有了这篇文章. 首先,我们来分解下开发步骤: 1.在菜单栏新增一个上传到 ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- xpath+多进程爬取八零电子书百合之恋分类下所有小说。
代码 # 需要的库 import requests from lxml import etree from multiprocessing import Pool import os # 请求头 he ...
- windows 上运行 sslocal 提示 libcrypto(OpenSSL) not found 解决办法
1.下载最新版ss客户端,使用pip安装的并不是最新版,去github下载最新版安装 2.安装openssl客户端 OpenSSL for Windows:https://wiki.openssl.o ...
- IntToBinaryString
void IntToBinaryString(int devisor,char* pBinStr) { int i; int remainder; ;i<;i++) { remainder=de ...