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的放大效果:

  • 相关阅读:
    mysql查看每张表的空间使用情况
    下一步开发的技术点
    技术体系需要继续探索的东西
    架构体系需要进一步研究探索的V2路线图
    串行写队列的MYSQL大文本参数
    Node.js 数据存储方式的选择
    Node.js npm 详解
    Node入门
    Node.js知识点学习
    为什么应使用 Node.js
  • 原文地址:https://www.cnblogs.com/hedianzhan/p/9389884.html
Copyright © 2011-2022 走看看