zoukankan      html  css  js  c++  java
  • 查看图片大图效果

    1、效果展示:

     

    2、HTML 、添加onclick="getBigimg(this)"事件

    <ul class="bus_list">

      <li onclick="getBigimg(this)" data-url="https://cartype.image.mucang.cn/cartype-image/2021/0219/05/2c664b692b7a466a9d2669cbb8882850.jpg!1600x0">

        <img src="https://cartype.image.mucang.cn/cartype-image/2021/0219/05/2c664b692b7a466a9d2669cbb8882850.jpg!1600x0">

      </li>

    </ul>

    //渲染大图

    <div id="outerdiv">

      <div id="innerdiv">

        <img id="bigimg" src="" / >

      </div>

    </div>

    3、js代码

    <script>
     function getBigimg(obj) {
    var imgSrc=$(obj).attr("data-url");
    imgShow("#outerdiv", "#innerdiv", "#bigimg", imgSrc);
    }
    function imgShow(outerdiv, innerdiv, bigimg, imgSrc) {
    $(bigimg).attr("src", imgSrc); //设置#bigimg元素的src属性
    /*获取当前点击图片的真实大小,并显示弹出层及大图*/
    $("<img/>").attr("src", imgSrc).load(function() {
    var windowW = $(window).width(); //获取当前窗口宽度
    var windowH = $(window).height(); //获取当前窗口高度
    var realWidth = this.width; //获取图片真实宽度
    var realHeight = this.height; //获取图片真实高度
    var imgWidth, imgHeight;
    //获取图片真实大小,在不超过当前窗口的情况下等比放大,超出窗口则等比缩小
    // var scale = 0.8; //缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放
    // if(realHeight > windowH * scale) { //判断图片高度
    // imgHeight = windowH * scale; //如大于窗口高度,图片高度进行缩放
    // imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
    // if(imgWidth > windowW * scale) { //如宽度扔大于窗口宽度
    // imgWidth = windowW * scale; //再对宽度进行缩放
    // }
    // } else if(realWidth > windowW * scale) { //如图片高度合适,判断图片宽度
    // imgWidth = windowW * scale; //如大于窗口宽度,图片宽度进行缩放
    // imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
    // } else { //如果图片真实高度和宽度都符合要求,高宽不变
    // imgWidth = realWidth;
    // imgHeight = realHeight;
    // }
    var defaultWidth,defaultHeight;
    defaultWidth = 980; // 默认宽度
    defaultHeight = 550; //默认高度
    imgWidth = realWidth==defaultWidth?realWidth:defaultWidth; //如果超出或者小于默认尺寸,设定默认固定值
    imgHeight = realHeight==defaultHeight?realHeight:defaultHeight; //如果超出或者小于默认尺寸,设定默认固定值

    $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放
    $(bigimg).css("height", imgHeight); //以最终的宽度对图片缩放

    var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
    var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
    $(innerdiv).css({
    "top": h,
    "left": w
    }); //设置#innerdiv的top和left属性
    $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg
    });

    $(outerdiv).click(function() { //再次点击淡出消失弹出层
    $(this).fadeOut("fast");
    });
    }

    </script>
  • 相关阅读:
    Http异常状态码解决方案。
    integer 面试题。
    int转换为String,常用的四种方法。
    Implicit super constructor Array() is undefined for default constructor. Must define an explicit constructor
    Eclipse的常用设置。
    构造方法详解。
    this关键字。
    面向对象--构造方法知识点。
    生成1-100之间的随机数。
    redis回顾
  • 原文地址:https://www.cnblogs.com/chenwenjia/p/14712972.html
Copyright © 2011-2022 走看看