摘要:模态相册代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。
模态相册
代码储存在Github
效果预览
HTML部分初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。
CSS 部分×
/*初始化*/ * { margin: 0; padding: 0; box-sizing: border-box; } .row > .column { padding: 0 8px; } /*清除浮动*/ .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 25%; } .column img { width: 100%; cursor: pointer; } /*模态框*/ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); } /*模态内容*/ .modal-content { position: relative; background-color: #fefefe; margin: 0 auto; padding: 0; width: 90%; max-width: 1200px; animation: zoomShow 0.5s; /*添加动画*/ } @keyframes zoomShow { from {transform: scale(0)} to {transform: scale(1)} } /*关闭按钮*/ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover { color: #999; text-decoration: none; cursor: pointer; } /*模态图片*/ .mySlides { display: none; background-color: rgba(0,0,0,0.9); animation: fadeShow 0.5s; /*添加动画*/ } @keyframes fadeShow { from {opacity: 0} to {opacity: 1} } .mySlides img { width: 100%; } /*前翻后翻*/ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /*定位数字*/ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /*图片标题*/ .caption-container { text-align: center; background-color: rgba(0,0,0,0.9); padding: 5px 16px 10px; color: white; } img.demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s } img.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) }JavaScript 部分
(function() { /*打开模态框*/ function openModal() { var myModal = document.getElementById("myModal"); myModal.style.display = "block"; } /*关闭模态框*/ function closeModal() { var myModal = document.getElementById("myModal"); myModal.style.display = "none"; } /*切换模态图*/ function changeSlide(num) { var currentSlide, slides = document.getElementsByClassName("mySlides"); for (index = 0; index < slides.length; index++) { if(slides[index].style.display == "block") { currentSlide = index + 1; } } showSlide(currentSlide += num); } /*显现模态图*/ function showSlide(num) { var index, slides = document.getElementsByClassName("mySlides"), dots = document.getElementsByClassName("demo"), captionText = document.getElementById("caption"); if (num > slides.length) { num = 1 } if (num < 1) { num = slides.length } for (index = 0; index < slides.length; index++) { slides[index].style.display = "none"; } for (index = 0; index < dots.length; index++) { dots[index].classList.remove("active"); } slides[num - 1].style.display = "block"; dots[num - 1].classList.add("active"); captionText.innerHTML = dots[num - 1].alt; } /*点击模态内容以外,自动关闭*/ function clickOutside() { var myModal = document.getElementById("myModal"); window.onclick = function(event) { if(event.target == myModal) { closeModal(); } } } /*绑定事件监听*/ function addEvent() { var index, triggerImgs = document.getElementsByClassName("triggerImg"), dots = document.getElementsByClassName("demo"), closeBtn = document.getElementById("closeBtn"), prevBtn = document.getElementsByClassName("prev")[0], nextBtn = document.getElementsByClassName("next")[0]; for(index = 0; index < triggerImgs.length; index++) { (function(index) { triggerImgs[index].onclick = function() { openModal(); showSlide(index + 1); } })(index); } for(index = 0; index < dots.length; index++) { (function(index) { dots[index].onclick = function() { showSlide(index + 1); } })(index); } prevBtn.onclick = function() { changeSlide(-1); } nextBtn.onclick = function() { changeSlide(1); } closeBtn.onclick = function() { closeModal(); } } /*初始化*/ function init() { addEvent(); clickOutside(); } /*调用*/ init(); })();
好啦,现在所有的代码都写完啦!
赶快打开浏览器,看看效果吧!
在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!
参考自w3cschools
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50563.html
摘要:模态相册代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态相册 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材...
摘要:模态相册代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态相册 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材...
摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...
摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...
摘要:模态框代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 模态框 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级 的教材并不...
阅读 2393·2021-11-23 10:04
阅读 1459·2021-09-02 15:21
阅读 833·2019-08-30 15:44
阅读 1032·2019-08-30 10:48
阅读 680·2019-08-29 17:21
阅读 3520·2019-08-29 13:13
阅读 1957·2019-08-23 17:17
阅读 1747·2019-08-23 17:04