遍历出所有的图片，并且当点击该图片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>文件目录结构 结果
