标签搜索
jQuery 实现点击图片放大居中显示
jQuery 实现点击图片放大居中显示
3年前 827 阅读
  • 首页
  • /
  • 笔记
  • /
  • 正文
  • 原理

    点击图片触发单击响应事件,半透明的包含块全屏显示,然后图片进行放大居中显示。

    实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>点击图片放大</title>
        <style type="text/css">
            .pic img {
                cursor: pointer;
                width: 125px;
                height: 125px;
            }
            .picView {
                z-index: 99;
                display: none;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                position: fixed;
                background: rgba(0, 0, 0, 0.5);
            }
            .picView img {
                z-index: 100;
                width: 100%;
                cursor: pointer;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div class="pic">
            <img src="https://www4.bing.com/az/hprichbg/rb/LakeWinnipeg_ZH-CN0984485385_1920x1080.jpg">
        </div>
    
    <div class="picView">
            <img src="#">
        </div>
    
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.pic img').on('click', function () {
                var src = $(this).attr('src');
                $('.picView img').attr('src', src);
                $('.picView').show()
            });
            $('.picView').on('click', function () {
                $('.picView').hide()
            });
        })
    </script>
    </html>
    0
    那年今日

    评语 (0)

    取消