admin 管理员组文章数量: 894188
web灯箱
结果展示
代码如下:
css
*{margin: 0;padding: 0;
}
ul>li{list-style-type: none;
}
#lightBox{width: 1000px;margin: 0 auto;overflow: hidden;
}
#lightBox figure{float: left;margin: 15px;position: relative;
}
/*图片*/
#lightBox figure>img{width: 220px;height: 220px;display: block;object-fit: cover;
}
/*图片上面文字*/
#lightBox figure figcaption{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-weight: bolder;color: white;font-size: 16px;opacity: 0;z-index: 2;transition: all 0.6s linear;border: 2px solid white;padding: 6px 10px;text-align: center;
}
/*遮罩层*/
.mask{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;background: rgba(0,0,0,0.5);width: 100%;height: 100%;z-index: 1;transition: all 0.4s linear;
}
.maskAll{position: fixed;background: rgba(0,0,0,0.9);width: 100vw;height: 100vh;z-index: 4;transition: all 0.4s linear;
}
.lunboBox{width: 660px;height: 500px;/*background-color: white;*/z-index: 5;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
.lunboBox>ul{overflow: hidden;
}
.lunboBox>ul>li{float: left;font-size: 65px;color: white;/*color: black;*/height: 500px;line-height: 500px;margin: 0 10px;cursor: default;
}
.lunboBox>ul>li:nth-child(4){position: absolute;top: 10px;right: 75px;width: 50px;height: 50px;line-height: 50px;text-align: center;font-size: 40px;color: black;}
.lunboBox>ul>li>img{width: 500px;height: 500px;display: block;object-fit: cover;
}
js
(function LightBox() {var imgSrc = "";var index = -1;/*获取当前所有图片*/var imgList = new getAllImage();/*添加遮罩层div*/$("#lightBox figure").prepend("<div></div>");/*鼠标移入*/$("#lightBox figure").mouseover(function () {$(this).find("div").addClass('mask');$(this).find("figcaption").css('opacity', '1');})/*鼠标移出*/$("#lightBox figure").mouseout(function () {$(this).find("div").removeClass('mask');$(this).find("figcaption").css('opacity', '0');})/*鼠标点击当前图片事件*/$("#lightBox figure").click(function () {/*添加遮罩层div*/setMaskAll();/*把当前图片显示在遮罩层上面*/imgSrc = $(this).find("img").attr("src");//获取当前图片的srcindex = $("#lightBox figure").index($(this));//获取当前图片的下标/*显示第二层*/AddLunboDiv();})/*鼠标点击上一页*/$("main").on("click", ".prev", function () {prev();});/*鼠标点击下一页*/$("main").on("click", ".next", function () {next();});/*点击关闭*/$("main").on("click", ".close", function () {close();});/*点击大遮罩层关闭*/$("main").on("click", ".maskAll", function () {close();});function setMaskAll() {/*添加遮罩层div*/$("main").prepend("<div class='maskAll'></div>");}function getAllImage() {/*获取当前所有图片*/var imgList = $("#lightBox").find("figure img");return imgList;}function prev() {if (index === 0) {index = imgList.length;}/*获取上一张图片的src*/index = index - 1;imgSrc = imgList[index].src;$(".lunboBox").find("img").attr("src", imgSrc);}function next() {index = index + 1;if (index === imgList.length) {index = 0;}/*获取下一张图片的src*/imgSrc = imgList[index].src;$(".lunboBox").find("img").attr("src", imgSrc);}function close() {$("#lightBox").css('display', 'block');//显示后面的内容$(".lunboBox").css('display', 'none');//隐藏前面的内容$(".maskAll").css('display', 'none');$(".maskAll").remove();$(".lunboBox").remove();}function AddLunboDiv() {/*添加另一层*/$("main").append(`<div class="lunboBox"><ul class="list"><li class="prev"> < </li><li><img src="${imgSrc}" alt=""></li><li class="next"> > </li><li class="close"> X </li></ul><div> `);}
})();
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>灯箱</title><link rel="stylesheet" href="css/lightBox.css">
</head>
<body>
<main><div id="lightBox"><figure><img src="img/1.jpg" alt=""/><figcaption>是非在己</figcaption></figure><figure><img src="img/2.jpg" alt=""/><figcaption>毁誉由人</figcaption></figure><figure><img src="img/3.jpg" alt=""/><figcaption>得失不论</figcaption></figure>......</div>
</main></body>
<script src="js/jquery.3.4.0.js"></script>
<script src="js/lightBox.js"></script>
</html>
本文标签: web灯箱
版权声明:本文标题:web灯箱 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1687603645h120080.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论