遍历显示图片，并且可以点击放大图片

最新推荐文章于 2022-04-25 07:57:28 发布

Lv_SFeng

最新推荐文章于 2022-04-25 07:57:28 发布

阅读量505

点赞数

分类专栏： html js 前端文章标签： html js css javascript

本文链接：https://blog.csdn.net/Lv_SFeng/article/details/108379168

版权

前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

遍历显示图片，并且可以点击放大图片

遍历出所有的图片，并且当点击该图片4时，放大该图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #wrap {
        width: 1000px;
        margin: 10px auto;
        position: relative;
    }
    #title {
        height: 30px;
        font-size: 16px;
        background-color: lightskyblue;
    }

    #img-box ul:hover {
        background-color: #fdfaa1;
    }
    ul, li {
        list-style-type: none;
        float: left;
        margin: 30px 50px;
        text-align: center;
    }
    ul li {
        width: 150px;
        height: 180px;
        overflow: hidden;
    }
    ul li img {
        width: 150px;
        height: 150px;
    }

    #bigImg {
        width: 500px;
        height: 500px;
        z-index: 100;
        border: 1px solid red;
        position: absolute;
       /* top: 50%;*/
        left: 50%;
        margin: 50px;
        overflow: hidden;
    }

</style>
<body>
    <div id="wrap">
        <div id="title">
            照片【动态添加照片】
        </div>
        <div id="img-box">
            <ul id="ul_img">
                <!--<li>
                    <img src="./img/img_01.jpg" alt="" class="pic">
                    <span>测试</span>
                </li>-->
            </ul>
        </div>

        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
            <div id="innerdiv" style="position:absolute;">
                <img id="bigimg" style="border:5px solid #fff;z-index: 99" src="" />
            </div>
        </div>
    </div>
	<script>
        // arry中存放照片路径和说明
        var arry = [
            {
                url: './img/img_01.jpg',
                title: '入户门'
            },
            {
                url: './img/img_02.jpg',
                title: '外景们'
            },
            {
                url: './img/img_03.jpg',
                title: '客厅'
            },
            {
                url: './img/img_04.jpg',
                title: '卧室'
            },
            {
                url: './img/img_05.jpg',
                title: '卫生间'
            },
            {
                url: './img/img_06.jpg',
                title: '厨房'
            },
            {
                url: './img/img_07.jpg',
                title: '卧室'
            },

        ];
        var UL = document.getElementById("ul_img"); //获取ul元素

        for (let item of arry) {
            var LI = document.createElement("li"); //创建li元素
            var IMG = document.createElement("img"); //创建img元素
            var SPAN = document.createElement("span"); //创建span元素
            SPAN.innerHTML = item.title; //将图片的titl放到span元素中显示
            IMG.setAttribute("src", item.url); //设置图片的路径
            IMG.classList.add("pic"); //给img元素添加class
            LI.appendChild(IMG); //将img元素放大li元素中，下面同理
            LI.appendChild(SPAN);
            UL.appendChild(LI);
        }
        $(function () {
            $(".pic").click(function () {
                var _this = $(this)
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this)
            });
        });

        function imgShow(outerdiv, innerdiv, bigimg, _this){
            var src = _this.attr("src");//获取当前点击的img元素中的src属性
            $(bigimg).attr("src", src);//设置#bigimg元素的src属性
            /*获取当前点击图片的真实大小，并显示弹出层及大图*/
            $("<img/>").attr("src", src).on("load", function(){               
                var windowW = $(window).width();//获取当前窗口宽度
                var windowH = $(window).height();//获取当前窗口高度
                var w = (windowW-350)/2;//计算图片与窗口左边距，这里350表示放大后图片的大小，即下面设置图片放大后大小为350px。
                var h = (windowH-350)/2;//计算图片与窗口上边距
                $(bigimg).css({"width":"350px", "height":"350px"});
                $(innerdiv).css({"top":h, "left":w});
                $(outerdiv).fadeIn("fast");//fadeIn淡入效果
            });
            $(outerdiv).click(function(){//再次点击淡出消失弹出层
                $(this).fadeOut("fast");
            })
        }
    </script>
</body>
</html>

文件目录结构

结果

点击图片的效果

Lv_SFeng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
遍历显示图片，并且可以点击放大图片

遍历显示图片，并且可以点击放大图片遍历出所有的图片，并且当点击该图片4时，放大该图片。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #wrap { width: 1000px; margin: 10px
复制链接

扫一扫

专栏目录