最近想做一个类似QQ空间相册，点击照片会出现一个遮罩层，然后显示照片，可以左右切换照片，上网查了，原来叫灯箱效果，于是自己也写了一个简单的灯箱效果，并进行了简单封装，封装得不是很完善，后面还需要改进，下面先发布我的1.0版本，以下是源代码
这是html中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link href="css/lightBoxCss.css"rel="stylesheet"/>
<body>
<div id="lightBox">
<div id="imgDiv">
<ul id="ulList">
</ul>
</div>
<div id="disDiv">
<span id="exitBtn">x</span>
<div id="disImgDiv">
<img id="currentImg" src="" alt="#">
<span id="preArrow"><</span>
<span id="nextArrow">></span>
</div>
</div>
</div>
<script src="js/jsLightBox.js"type="text/javascript"charset="utf-8"></script>
</body>
</html>
这是css样式
*{
margin: 0px;
padding: 0px;
font-family: "Microsoft YaHei";
}
#lightBox{
width: 1349px;
height: 645px;
overflow: hidden;
position: relative;
}
/*图片列表*/
#imgDiv ul li{
list-style-type: none;
width: 300px;
height: 300px;
float: left;
margin: 10px 10px;
}
#imgDiv ul li img{
width: 100%;
height: 100%;
}
#disDiv{
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0,0,0,0.8);
display: none;
}
#disDiv span{
display: inline-block;
font-size: 40px;
color: white;
font-family:Arial;
margin-left: 95%;
margin-top: 1%;
cursor: pointer;
}
#disImgDiv{
width: 450px;
height: 450px;
margin-left: 450px;
position: relative;
-webkit-transition: all 0.5s ease;
}
#disImgDiv img{
width: 100%;
height: 100%;
}
/*左右箭头*/
#disImgDiv #preArrow,#disImgDiv #nextArrow{
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
text-align: center;
line-height: 25px;
background-color: rgba(0,0,0,0.7);
color: white;
font-size: 20px;
cursor: pointer;
position: absolute;
top: 213px;
opacity: 0;
-webkit-transition: all 0.5s ease;
}
#disImgDiv #preArrow{
left: -420px;
}
#disImgDiv #nextArrow{
right: 10px;
}
/*设置箭头移入效果*/
#disImgDiv:hover #preArrow,#disImgDiv:hover #nextArrow{
opacity: 1;
-webkit-transition: all 0.5s ease;
}
#disImgDiv #preArrow:hover,#disImgDiv #nextArrow:hover{
background-color: #f1f1f1;
color: #666666;
-webkit-transition: all 0.5s ease;
}
下面是js中的处理，对lightBox进行封装，只需要改变图片地址进行调用即可
/**
* 灯箱效果
* Created by Administrator on 2016/11/16.
*/
//封装的灯箱
var myLightBox= (function () {
/*
* ulList:图片列表的ul
* disDiv：显示的遮罩层
* exitBtn:退出按钮
* oLi：放图片的li
* currentImg：当前是哪张图片
* preArrow：上一页
* nextArrow：下一页
* imgArry：放图片地址的数组
* */
// 遮罩
function showDisDiv(ulList,disDiv,exitBtn,oLi,currentImg,preArrow,nextArrow,imgArry){
for(var i=0;i<imgArry.length;i++){
ulList.innerHTML+="<li><img src=‘"+imgArry[i]+"‘alt=‘#‘></li>";//添加图片节点
}
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmousedown=function () {
disDiv.style.display="block";
currentImg.setAttribute("src",imgArry[this.index]);//设置图片src
var imgNum=this.index;
//上一页
preArrow.onclick= function () {
imgNum--;
if(imgNum==-1){
imgNum=imgArry.length-1;
}
currentImg.setAttribute("src",imgArry[imgNum]);//设置图片src
}
//下一页
nextArrow.onclick= function () {
imgNum++;
if(imgNum==imgArry.length){
imgNum=0;
}
currentImg.setAttribute("src",imgArry[imgNum]);//设置图片src
}
}
}
exitBtn.onmousedown= function () {//隐藏遮罩层
disDiv.style.display="none";
}
}
return showDisDiv;
})();
window.onload= function () {
var ulList=getId("ulList");//图片列表ul
var disDiv=getId("disDiv");//遮罩层
var exitBtn=getId("exitBtn");//退出
var oLi=document.getElementsByTagName("li");//图片li
var disImgDiv=getId("disImgDiv");//遮罩显示当前图片的div
var currentImg=getId("currentImg");//显示当前图片的img
var preArrow=getId("preArrow");//上一页
var nextArrow=getId("nextArrow");//下一页
var imgArry=[‘img/imgFour.jpg‘,‘img/imgTwo.jpg‘,‘img/imgThree.jpg‘,‘img/imgFive.jpg‘];//图片路径的数组
var getLightBox=myLightBox;//得到封装的灯箱效果
getLightBox(ulList,disDiv,exitBtn,oLi,currentImg,preArrow,nextArrow,imgArry);//调用封装的lightBox
}
function getId(id){
return document.getElementById(id);
}
时间： 2024-08-25 01:20:17