js点击图片放大

时间：2023-03-09 06:13:21
js点击图片放大

废话不说直接放代码了：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport"

          content="width=device-width,initial-scale=1,maximum-scale=1.0" />

 <title>title</title>

   <style>

        .max{width:auto;height:100%;position: fixed;background: rgb(0, 0, 0);margin:auto;left:0; right:0; top:0; bottom:0;z-index: 99;}

        .min{width:auto;height:200px;}

        .coverage{width:100%;height:100%;position: fixed;background: rgb(0, 0, 0);margin:auto;left:0; right:0; top:0; bottom:0;z-index: 98;opacity: 0.7;}

    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">

        $(function(){

            $('#imgUrl').click(function(){

                console.log(123);

                $(this).toggleClass('max');

                $(this).toggleClass('min');

                $('#divImg').toggleClass('coverage');

            });

        });

    </script>

</head>

<body>

   <div id="divImg"></div>

                    <img id="imgUrl" name="imgUrl" alt="图片不存在" class="min"  src="http://ubmcmm.baidustatic.com/media/v1/0f0005DvCD4iH17mKT7tys.jpg">

</body>

</html>

相关文章