• JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用


    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图。记录下来以便学习和参考.示例图如下:

    放大之前:

    放大之后:

    点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列表界面)

    附代码(js实现):

    1、获取所有img标签,添加展开功能,该方法在图片列表加载完成以后执行:

    1             function addExpand() {
    2                 var imgs = document.getElementsByTagName("img");
    3                 imgs[0].focus();
    4                 for(var i = 0;i<imgs.length;i++){
    5                     imgs[i].onclick = expandPhoto;
    6                     imgs[i].onkeydown = expandPhoto;
    7                 }
    8             }

    2、方法1种循环给图片的onclick和onckeydown指定了expandPhoto方法,该方法实现了点击图片放大的功能:

     1             function expandPhoto(){
     2                 var overlay = document.createElement("div");
     3                 overlay.setAttribute("id","overlay");
     4                 overlay.setAttribute("class","overlay");
     5                 document.body.appendChild(overlay);
     6  
     7                 var img = document.createElement("img");
     8                 img.setAttribute("id","expand")
     9                 img.setAttribute("class","overlayimg");
    10                 img.src = this.getAttribute("src");
    11                 document.getElementById("overlay").appendChild(img);
    12  
    13                 img.onclick = restore;
    14             }

    3、(style样式)方法2中,expndPhoto创建了一个id="overlay",class="overlay"的div,再给div创建了一个id="expand",class="overlayimg"的img标签,overlay和overlayimg类选择器定义如下:

     <style>
              .overlay{
                   background-color:#000; //背景色
                   opacity: 1.0; //不透明度
                   filter:alpha(opacity=100); //透明度
                   position: fixed;
                   top:0;
                   left:0;
                   100%;
                   height:100%;
                   z-index: 10;
                   overflow:auto; //滚动条
               }
               .overlayimg{
                   position: absolute;
                   z-index: 11;
                   99%; //宽度
                   height:auto; //高度自动
               }
    </style>

    4、方法2中,给创建的img标签的onclick指定了restore方法,该方法实现了点击大图回到图片列表的功能,定义如下:

    1             function restore(){
    2                 document.body.removeChild(document.getElementById("overlay"));
    3                 document.body.removeChild(document.getElementById("expand"));
    4             }

    5、复制粘贴即可

    原文链接:https://blog.csdn.net/weixin_33890526/article/details/94694759

  • 相关阅读:
    [匈牙利] 洛谷 P2526 小狗散步
    [匈牙利] 洛谷 P1129 矩阵游戏
    [树形dp] Jzoj P5233 概率博弈
    [线段树] Jzoj P4231 寻找神格
    [状压dp][期望] 洛谷 P2473 奖励关
    [倍增][双向链表] Jzoj P3101 开车旅行
    [高精度][数学] Jzoj P3771 小Z的烦恼
    [并查集][排序] Jzoj P2940 生成输入数据
    [dfs][概率] Jzoj P2941 贿赂
    [权值线段树] Jzoj P4417 神奇的字符串
  • 原文地址:https://www.cnblogs.com/guozhaoxin/p/11855828.html
Copyright © 2020-2023  润新知