zoukankan      html  css  js  c++  java
  • Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下:

    //获取图片原始宽度
    function getNaturalWidthAndHeight(img) {
    var image = new Image();
    image.src = img.src;
    return [image.width,image.height];
    }

    //点击缩略图弹出层,显示原始图片。

    //获取class为tz_main_box下的所有p标签下的图片img
    $(".tz_main_box p>img").each(function (k, v) {
    $(this).unbind("click"); //解除绑定,防止弹出多次图片层。
    $(this).click(function () {
    var img = v; //图片对象
    var imgArea = getNaturalWidthAndHeight(img);
    var layerWidth = imgArea[0]+ 5;
    if (layerWidth > 1080) {
    layerWidth = 1080;
    }
    var layerHeight = imgArea[1] + 5;
    if (layerHeight > 600) {
    layerHeight = 600;
    }

    //layer弹出层插件
    layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    area: [''+layerWidth+'px', '' + layerHeight + 'px'],
    skin: 'layui-layer-nobg', //没有背景色
    shadeClose: true,
    closeBtn: 1, //显示关闭按钮
    content: "<center><img src='" + $(this).attr("src") + "'></center>"
    });
    });
    });

  • 相关阅读:
    django 常用命令
    nginx+gunicorn
    终于决定写个技术博客
    test
    自定义控件
    .net mvc 发布部署到机器上
    C# StringExt 字符串扩展
    MYSQL连接数据库
    List IEnumerable
    CentOS安装pip
  • 原文地址:https://www.cnblogs.com/lihaishu/p/5501046.html
Copyright © 2011-2022 走看看