HTML 点击图片放大

最新推荐文章于 2024-06-07 13:51:40 发布

weixin_30527423

最新推荐文章于 2024-06-07 13:51:40 发布

阅读量2.8k

点赞数 2

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoxiao2017/p/10572725.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../files/js/jquery-3.3.1.min.js"></script>
    <style>
        .image_normal{
            width: 200px;
            height: 200px
        }
        .image_large{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,.3);
            z-index: 100;
            display: none 
        }
        .image_large{
            z-index: 999;
        }
    </style>
</head>

<body>
    <!-- 图片放大 -->
    <div class=" "> 
            <img src="../files/img/bcLogina.png" class="image_normal">
            <div   class="image_large"></div>
        </div> 
    <script type="text/javascript">
        $(function () {
            $(".image_normal").click(function () {
                var large_image = '<img src= ' + $(this).attr("src") + '></img>';
                console.log(large_image)
                $('.image_large').html($(large_image).css({
                    display:"block",
                    height: '50%',
                    width: '50%',
                    position: "absolute",
                    left: "50%",
                    top: "50%", 
                    transform: "translate(-50%,-50%)",
                }, 500));
                $('.image_large').css( "display","block" );
            });
            $('.image_large').click(function(){
                $(this).css( "display","none" );
            })
        });
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/xiaoxiao2017/p/10572725.html

weixin_30527423

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML 点击图片放大

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫