点击小图出现大图，再点击还原

DongHappyyy

于 2021-11-02 18:45:31 发布

阅读量208

点赞数

分类专栏： python 文章标签： html css

本文链接：https://blog.csdn.net/weixin_39715012/article/details/121106459

版权

python 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>
    点击小图切换大图
  </title>

  <style>
    .small_img {
        cursor: pointer;
        display: inline;
        /*none：此元素不会被显示。inline默认：元素会被显示为内联元素，元素前后没有换行符。block此元素将显示为块级元素，元素前后会带有换行符。*/
        position: relative;
        width: 50%;
        height: 50%;
        left: 0%;
        top: 0%;
    }
    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:100;
        /*该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。*/
        -moz-opacity: 0.8;              /*  透明 火狐 */
        opacity:.80;                    /*  透明 其他浏览器 */
        filter: alpha(opacity=80);      /*  透明 IE */
    }
    .big_img {
        cursor: pointer;                /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。pointer呈现为一只手*/
        display: none;
        position: table-cell;
        vertical-align: middle;
        text-align: center;
        z-index:1002;
        /* width: 70%;
        height: 70%; */
        /*auto默认。浏览器会计算出实际的高度。length使用 px等单位定义高度。%基于包含它的块级对象的百分比高度。*/
        /* left: 15%;
        top: 15%; */
        /* margin: auto; */
        /* margin: -60px 0px 0px -60px; */
        /* overflow: auto; */
    }
  </style>
</head>
<body>




  <img id="or" class="small_img" src ="results/test1.jpg" onclick="document.getElementById('light').style.display ='block';document.getElementById('fade').style.display='block';document.getElementById('or').style.display='none'"/>

<img id="light" class="big_img" src ="results/test22.jpg" onclick = "document.getElementById('light').style.display ='none' ;document.getElementById('fade').style.display='none';document.getElementById('or').style.display='block'"/>

<div id="fade" class="black_overlay"></div>

</body>

</html>