写在前面

需求是页面上的图片缩略图, 鼠标悬浮时显示原图片, 并按比例缩放.

操作步骤

官方文档

点击跳转

关键属性

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()方法查看缩略图 原图缩放的更多相关文章

  1. layui(二)——layer组件常见用法总结

    layer是layui的代表作,功能十分强大,为方便以后快速配置这里对其常见用法做了简单总结 一.常用调用方式 //1.普通消息:alert(content,[options],[yesCallBac ...

  2. layui时间,table,大图查看,弹出框,获取音频长度,文件上传

    1.引入: <link href="../../Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" ...

  3. layui与layer同时引入冲突的问题

    之前在项目中只有用layer,但是后来有用到了layui,结果发现同时引入这两个东东 会出现冲突的问题 导致代码运行不正常 后来网上找到了解决办法: 学习源头:http://fly.layui.com ...

  4. layui常见弹窗使用方法

    1:confim类型使用方法 layui.use('layer', function(){ layer.confirm('是否立即上传卷宗信息?', {    btn: ['是','否'],    t ...

  5. layui之layer打开table后分页无效的解决方法

    1.原代码: <body> <div id="showalladdableavms" style="display: none;width:100%&q ...

  6. Caffe 不同版本之间layer移植方法

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52185521 (前两天这篇博客不小心被 ...

  7. JS中通过LayUI的layer.prompt弹出文本输入层,多个按钮回调获取输入值

    JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...

  8. 拼接html不显示layui进度条解决方法

    最新有个新需求,要异步拼接html并渲染数据,并且我这边是用layui的flow.load(流加载)渲染多个进度条.按官网给出的 element.progress('demo', n+'%'); 就是 ...

  9. 三种方法查看MySQL数据库的版本

    1.使用-V参数 首先我们想到的肯定就是查看版本号的参数命令,参数为-V(大写字母)或者--version 使用方法: D:\xampp\mysql\bin>mysql -V 或者 D:\xam ...

随机推荐

  1. Python使用numpy进行数据转换

    一.测试数据 二.代码实现 # -*- coding: utf-8 -*- """ Created on Sun Jul 7 11:35:01 2019 加载数据时对指定 ...

  2. 《我是一只IT小小鸟》读书笔记——第七周

    我是一只IT小小鸟,每一个程序员都是从这样的阶段成长起来的,问题是是否能一开始就找到正确的路径,少走弯路.本书收集了许多年轻程序员从大学开始到就业的成长之路,十分有指导价值也很让人深思. 切忌急功近利 ...

  3. 使用EwoMail搭建属于自己的个人邮件服务器——超详细图文教程

    版权声明:本文为CSDN博主「C_成」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/qq_41692307 ...

  4. MySQL- [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ' which is not functionally dependent on columns in GR

    新建的mysql,在查询时报异常信息,虽然有正常执行结果. [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY claus ...

  5. 图记 2016.1.7 获取本地图片、Bitmap转image

    这几天完成的内容有: 1.“添加图片”按钮 2.添加图片功能 遇到的问题: 我想要将添加图片按钮放在右下角,所以采用了相对布局,但是问题随之二来,因为将导航栏设置成了半透明,所以图片放到右下角之后,半 ...

  6. angularcli 第六篇(todolist 列表)

    1.通过文本框输入,向数组添加数据 <!-- 通过文本框输入,向数组添加数据 push --> <input type="text" name="111 ...

  7. 《深入理解 Java 虚拟机》读书笔记:Java 内存区域与内存溢出异常

    前言 最近开始看这本书,记得前段时间拿起这本书的时候,心情是相当沉重的!当时的剧本是这样的-- 内景.家里 - 下午 我(画外):唉,有点无聊啊!(偶然撇过书架)这么多书得看到什么时候啊,要不要拿一本 ...

  8. CentOS 6.x 无法格式化大于16TB的ext4分区处理

    CentOS 6.x 在格式化大于16TB的ext4分区时,会提示如下错误: mke2fs 1.41.12 (17-May-2010) mkfs.ext4: Size of device /dev/s ...

  9. Spring源码窥探之:AOP注解

    AOP也就是我们日常说的@面向切面编程,看概念比较晦涩难懂,难懂的是设计理念,以及这样设计的好处是什么.在Spring的AOP中,常用的几个注解如下:@Aspect,@Before,@After,@A ...

  10. linux添加用户adduser出现 useradd:cannot lock /etc/passwd; try again

    找一下有个叫/etc/passwd.lock的文件,找到,给它用root删掉就好了,可能是上次使用到这个文件没有正常关闭.具体操作:切换到root用户,用cd etc到etc目录下,rm .pwd.l ...