使用Layer完成图片放大功能

Posted hedianzhan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Layer完成图片放大功能相关的知识,希望对你有一定的参考价值。

序言:在写这个功能之前也用了zoom.js,zoom.js用起来简单引用js然后设置图片属性就可以放大。但是放大后的图片模糊、没有遮罩、在放大图片时其它图片布局会受到影响,当然如果觉得这些都是小问题的话接来下的代码就可以不用看了,这个实现的功能是和zoom.js一样的,只是个人强迫为了体验效果更佳而进行改动。注意事项:放大后的图片其实就是图片自身的大小,放大之前是进行缩小的图片。

 

1.引用layer.js

Layer官网:http://layer.layui.com/

2.html代码:

技术分享图片
<a href="javascript:DataHtml(‘无标题2.jpg‘,‘/UploadFiles/VendorNo/PUR000001/78b65e62-cb56-49eb-9cc2-591376f4cdf4.jpeg‘)">
  <img alt=‘无标题2.jpg‘ title=‘无标题2.jpg‘ style=‘width:100px‘ src=‘/UploadFiles/VendorNo/PUR000001/78b65e62-cb56-49eb-9cc2-591376f4cdf4.jpeg‘/>
</a>
<a href="javascript:DataHtml(‘无标题.jpg‘,‘/UploadFiles/VendorNo/PUR000001/a55c127f-b6be-4455-a576-f0ca033a116e.jpeg‘)">
  <img alt=‘无标题.jpg‘ title=‘无标题.jpg‘ style=‘width:100px‘ src=‘/UploadFiles/VendorNo/PUR000001/a55c127f-b6be-4455-a576-f0ca033a116e.jpeg‘/>
</a>
<img style="display:none" id="displayimg" src="" />
技术分享图片

3.js代码:

技术分享图片
function DataHtml(name, url) {
                $("#displayimg").attr("src", url);
                var height = $("#displayimg").height();
                var width = $("#displayimg").width();
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    area: [width + ‘px‘, height + ‘px‘], //宽高
                    content: "<img alt=" + name + " title=" + name + " src=" + url + " />"
                });
            }
技术分享图片

浏览器效果:

技术分享图片

 

zoom.js的放大效果:

技术分享图片







以上是关于使用Layer完成图片放大功能的主要内容,如果未能解决你的问题,请参考以下文章

鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

layer 点击弹出图片

鼠标经过,图片放大事件

JS图片放大1

js实现拖拽和放大 图片

Struts2(九.利用layer组件实现图片显示功能)