图片点击在原图呈上放大的效果

我就是我 2022-04-16 06:52 366阅读 0赞

<html>  
<head>  
<meta charset="utf-8">  
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>  
<style>  
    \*\{  
        padding: 0px;  
        margin: 0px;  
    \}  
    .cloes-tag \{  
        position: absolute;  
        right: 20px;  
        top: 20px;  
        width: 20px;  
        height: 20px;  
        border: none;  
        cursor: pointer;  
        -webkit-transition: all 1s;  
        -ms-transition: all 1s;  
        -moz-transition: all 1s;  
        -o-transition: all 1s;  
        transition: all 1s;  
    \}  
    .cloes-tag:before,  
    .cloes-tag:after \{  
        content: '';  
        position: absolute;  
        background-color: \#a9a9a9;  
        transform: rotate(45deg);  
        -ms-transform: rotate(45deg);  
        -webkit-transform: rotate(45deg);  
        -o-transform: rotate(45deg);  
        -moz-transform: rotate(45deg);  
    \}  
    .cloes-tag:before \{  
        left: 45%;  
        top: -10%;  
        width: 10%;  
        height: 120%;  
    \}  
    .cloes-tag:after \{  
        top: 45%;  
        left: -10%;  
        width: 120%;  
        height: 10%;  
    \}  
    img\{  
        width: 20%;  
        height: auto;  
        cursor: pointer;  
    \}  
    .window\{  
        position: fixed;  
        width: 75%;  
        height: 75%;  
        left: 50%;  
        top: 50%;  
        visibility: hidden;  
        opacity: 0;  
        background-color: white;  
        -webkit-transition: all 0.6s;  
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.6);  
    \}  
    .window img\{  
        width: 50%;  
    \}  
    .window-show\{  
        visibility: visible;  
        opacity: 1;  
        -webkit-transform: translateX(-50%) translateY(-50%) scale(1);  
        text-align: center;  
    \}  
</style>  
</head>  
    <body>  
        <img src="1.jpg">  
        <div class="window">  
            <div class="cloes-tag"></div>  
            <img src="1.jpg">  
              
        </div>  
    <script>  
        var $ = function( obj )\{  
            return document.querySelector( obj );  
        \}  
        $('img').addEventListener('click', function()\{  
            $('.window').classList.add('window-show');  
        \}, false)  
        $('.cloes-tag').addEventListener('click', function()\{  
            $('.window').classList.remove('window-show');  
        \}, false)  
    </script>  
   
</body>  
</html>