前端实例练习——模态相册

时间：2023-04-02 21:52:09 HTML

模态相册代码存放在Github效果预览初衷：很多人刚接触前端都会问，“前端如何入门？”，我对目前网上的“入门级”教材不是很满意。在学习一门新知识时，例子尤为重要。这里我整理一下当前页面常用功能实现的具体例子。希望能为您提供一些帮助。希望与大家分享，共同进步。HTML部分

1of42/43/44/4??

</div>CSS部分/*初始化*/*{保证金：0；填充：0；box-sizing:border-box;}.??row>.column{padding:08px;}/*clearfloat*/.row:after{content:"";显示：表格；清除：两者；}.column{浮动：左；宽度：25%；}.columnimg{宽度：100%；cursor:pointer;}/*模态框*/.modal{display:none;位置：固定；z-索引：1；填充顶部：100px；左：0；顶部：0；宽度：100%；高度：100%；溢出：自动；背景色：rgba(0,0,0,0.9);}/*模态内容*/.modal-content{position:relative;背景色：#fefefe；保证金：0自动；填充：0；宽度：90%；最大宽度：1200px；动画：zoomShow0.5s；/*添加动画*/}@keyframeszoomShow{from{transform:scale(0)}to{transform:scale(1)}}/*Closebutton*/.close{color:white;位置：绝对；顶部：10px；右：25px；字体大小：35px；字体粗细：粗体；}.close:hover{颜色：#999；文字修饰：无；cursor:pointer;}/*模态图片*/.mySlides{display:none;背景色：rgba(0,0,0,0.9)；动画：fadeShow0.5s；/*添加动画*/}@keyframesfadeShow{from{opacity:0}to{opacity:1}}.mySlidesimg{width:100%;}/*前翻后翻*/.prev,.next{cursor:指针;位置：绝对；顶部：50%；宽度：自动；填充：16px；边距顶部：-50px；白颜色;字体粗细：粗体；字体大小：20px；过渡：缓和0.6秒；边界半径：03px3px0；user-select:none;}.next{right:0;border-radius:3px003px;}.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8);}/*确定位置数字*/.numbertext{color:#f2f2f2;字体大小：12px；填充：8px12px；位置：绝对；top:0;}/*图片标题*/.caption-container{text-align:center;背景色：rgba(0,0,0,0.9)；填充：5px16px10px；颜色：白色；}img.demo{不透明度：0.6；}.active,.demo:hover{不透明度：1；}img.hover-shadow{过渡：0.3s}img.hover-shadow:hover{box-shadow:04px8px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19)}JavaScriptpart(function(){/*打开模组模态框*/functionopenModal(){varmyModal=document.getElementById('myModal');myModal.style.display="block";}/*关闭模态框*/functioncloseModal(){varmyModal=document.getElementById('myModal');myModal.style.display="none";}/*切换模态图像*/functionchangeSlide(num){varcurrentSlide,slides=document.getElementsByClassName("mySlides");for(index=0;indexslides.length){num=1}if(num<1){num=slides.length}for(index=0;index

上一篇：实现平行四边形

下一篇：Powernodeweb前端基础教程（很详细）HTML+CSS+JavaScript

前端实例练习——模态相册相关文章