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>"
    });
    });
    });

  • 相关阅读:
    Python 函数 之 目录
    python---------匿名函数
    python-------递归函数
    python-----内置函数
    hibernate.cfg.xml
    struts2 工作原理
    拦截器
    js制作 子菜单
    struts---最简单实例步骤
    常用标签---地址----
  • 原文地址:https://www.cnblogs.com/lihaishu/p/5501046.html
Copyright © 2011-2022 走看看