lightBox灯箱效果

Posted windowClass

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了lightBox灯箱效果相关的知识，希望对你有一定的参考价值。

最近想做一个类似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">&lt;</span>
            <span id="nextArrow">&gt;</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);
}

 

以上是关于lightBox灯箱效果的主要内容，如果未能解决你的问题，请参考以下文章

JSP基础

使用jquery播放视频的灯箱效果？

多页灯箱（模态图片库）在1页

灯箱效果插件Magnific Popup详解

lightbox灯箱效果

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js