最近想做一个类似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); }