超简单jq完成点击图片放大功能

最新推荐文章于 2023-01-10 09:36:51 发布

闹闹的闹钟

最新推荐文章于 2023-01-10 09:36:51 发布

阅读量6.8k

点赞数 5

文章标签：点击放大图片 jquery

本文链接：https://blog.csdn.net/weixin_42157001/article/details/96332355

版权

后台小伙伴给的需求，本想找找类似的插件使用一下算了，想了想这个功能好像也不是很难实现，况且安装插件要先查找很多，然后筛选自己合适的，下载，导入，太麻烦了，不如自己手写。

基本需求是引入 jquery.js 文件，去jquery官网下载最新版就行；

<body>

    <img class="pic01" src="11.jpg" alt="">
    <img class="pic01" src="12.jpg" alt="">
    
    <div class="pic02">
        <img src="#" alt="">
    </div>
    
    <script>
    
        $('.pic01').on('click',function(){
            var picSrc =  $(this).attr('src')
            $('.pic02 img').attr('src',picSrc)
            $('.pic02').show() 
        })
        $('.pic02').on('click',function(){
            $('.pic02').hide() 
        })

    </script>
</body>

    <style>
        html,body{
            background: red;
            margin: 0;
            padding: 0;
        }
        img{
            width: 100px;
            height: 100px;
        }
        .bigPic{
            display: none;
        }
        .pic02{
            display: none;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background:rgba(255, 255, 255, 0.678);
        }
        .pic02 img{
            z-index: 11;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            left: 50%;
        }
    </style>

懒得敲的小伙伴直接去我git上下载吧(*^▽^*)：

https://github.com/chenlun1000/togglePic.git

闹闹的闹钟

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
超简单jq完成点击图片放大功能

后台小伙伴给的需求，本想找找类似的插件使用一下算了，想了想这个功能好像也不是很难实现，况且安装插件要先查找很多，然后筛选自己合适的，下载，导入，太麻烦了，不如自己手写。基本需求是引入 jquery.js 文件，去jquery官网下载最新版就行；<body> <img class="pic01" src="11.jpg" alt=""> &lt...
复制链接

扫一扫