第一个图像是一个最大宽度为300px的小图像。然后是灯箱，也是模态框（Modal），有关闭按钮，有大图，有标题。其中图片不指定src，留给JavaScript处理，标题同理。灯箱最初是隐藏的。再来看CSS的部分：/*设置用于触发模态的图像样式*/#myImg{border-radius:5px;游标：指针；transition:0.3s;}#myImg:hover{opacity:0.7;}/*模态（背景）*/.modal{display:none;/*默认隐藏*/position:fixed;/*留在原地*/z-index:1;/*位于顶部*/padding-top:100px;/*盒子的位置*/left:0;顶部：0；宽度：100%；/*全宽*/高度：100%；/*全高*/overflow:auto;/*如果需要启用滚动*/background-color:rgb(0,0,0);/*后备颜色*/background-color:rgba(0,0,0,0.9);/*黑色带不透明度*/}/*模态内容（图片）*/.modal-content{margin:auto;显示：块；宽度：80%；max-width:700px;}/*模式图像的标题（图像文本）-与图像宽度相同*/#caption{margin:auto;显示：块；宽度：80%；最大宽度：700px；文本对齐：居中；颜色：#ccc；填充：10px0；height:150px;}/*添加动画-放大Modal*/.modal-content,#标题{动画名称：缩放；animation-duration:0.6s;}@keyframeszoom{从{transform:scale(0)}到{transform:scale(1)}}/*关闭按钮*/.close{position:absolute;顶部：15px；右：35px；颜色：#f1f1f1；字体大小：40px；字体粗细：粗体；transition:0.3s;}.close:hover,.close:focus{颜色：#bbb;-装饰：无；cursor:pointer;}/*100%图像宽度在较小的屏幕上*/@mediaonlyscreenand(max-width:700px){.modal-content{width:100%;}}关注.modal，一开始不显示，全屏背景色为黑色，加了一点透明度。放大动画是用CSS动画实现的。其实就是用transform把图片和标题的比例从0放大到1。最后JavaScript：//获取模态变量modal=document.getElementById('myModal');//获取图像并将其插入模式-使用其“alt”文本作为标题varimg=document.getElementById('myImg');varmodalImg=document.getElementById("img01");varcaptionText=document.getElementById("标题");img.onclick=function(){modal.style.display="块";modalImg.src=这个.src;captionText.innerHTML=this.alt;}//获取关闭modalvar的元素span=document.getElementsByClassName("close")[0];//当用户点击(x)时，关闭modalspan.onclick=function(){modal.style.display="none";}JavaScript部分主要是利用灯箱中第一张图片的数据，如src等，显示灯箱出来。另外，关闭按钮的功能也完成了：隐藏灯箱。W3Schools系列的代码都在GitHub上：W3SchoolsGitHubW3Schools教学系列W3Schools是一个知名的网页设计/前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详细教学，还可以用作文档（Documents）。有经验的前端都或多或少接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的HowTo部分包含了很多非常实用的例子，例如如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。所以我想制作一系列专门介绍这些操作方法的视频。所有W3Schools系列视频：FloatResponsiveWebLayoutFlexboxResponsiveWebLayoutCSSGridResponsiveWebLayoutSlideshow如何实现响应式导航如何实现响应式导航