zoukankan      html  css  js  c++  java
  • 使用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='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='100px' src='/UploadFiles/VendorNo/PUR000001/a55c127f-b6be-4455-a576-f0ca033a116e.jpeg'/>
    </a>
    <img alt="" 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的放大效果:

  • 相关阅读:
    atcoder做题记录
    CSP-S2021题解
    记录近期JAVA后端开发面试总结
    技术文章系列汇总(csdn转载)
    个人技术文章系列汇总(简书)
    个人技术文章系列汇总(csdn原创)
    解密Kafka吞吐量高的原因
    Java 常见面试题整理
    restemplate调用失败提示 处理方法
    Keil MDK忽略警告:文件末尾空白行警告
  • 原文地址:https://www.cnblogs.com/hedianzhan/p/9389884.html
Copyright © 2011-2022 走看看