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

    -webkit-transition: all 0.5s ease;

}

#disImgDiv #preArrow{

    left: -420px;

}

#disImgDiv #nextArrow{

    right: 10px;

}

/*设置箭头移入效果*/

#disImgDiv:hover #preArrow,#disImgDiv:hover #nextArrow{

    opacity:;

    -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灯箱效果的更多相关文章

  1. 一款经典的 jQuery Lightbox 灯箱效果

    一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...

  2. 20款美化网站的 jQuery Lightbox 灯箱插件

    jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

  3. 灯箱效果插件Magnific Popup详解

    Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件.它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用. 官网地址: http://dimsemenov.co ...

  4. 30个Jquery灯箱插件

    jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化. 下面 ...

  5. jQuery笔记总结

    来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一 ...

  6. 【repost】jQuery笔记总结

    第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 J ...

  7. 12款响应式 Lightbox（灯箱）效果插件

    灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...

  8. JS图片灯箱(lightBox)效果基本原理和demo

    到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉 ...

  9. Strip JS – 低侵入，响应式的 Lightbox 效果

    Strip  是一个灯箱效果插件,显示的时候只会覆盖部分的页面,这使得侵扰程度较低,并留出了空间与页面上的大屏幕,同时给予小型移动设备上的经典灯箱体验.Strp JS 基于 jQuery 库实现,支持 ...

随机推荐

  1. lkx开发日志1-项目前的准备

    遇到的问题 不了解github的使用 不能熟练的用Markdown编辑,比如:放入图片 虚拟机的认知也还是有点模糊 解决的方法 参照老师博文给出的链接,好好学习实操一遍 多请教组员,很多小问题便迎刃而 ...

  2. 生产/消费 发送和接收消息---基于kombu和redis交互

    from kombu import Connection, Exchange, Queue media_exchange = Exchange('media', 'direct', durable=T ...

  3. Computop支付网关(一) credit Card

    1.界面没有中文,只能选择英文 sp – Spanish; en – English; ca – Catalan; fr – French; de – German; du – Dutch; it – ...

  4. C++笔记（一）

    一.动态数组 一般我们定义数组都是用下面的方式: int str[100]; 但对于一些需要手动输入数组大小的情况,这种定义方式就行不通了.因为上面这种方式要求事先知道数组大小,并且给数组中括号中必须 ...

  5. ubuntu command

    uninstall software: sudo apt-get purge openjdk*

  6. paper 132：图像去噪算法：NL-Means和BM3D

    这篇文章写的非常好,确定要~认真~慎重~的转载了,具体请关注本文编辑作者:http://wenhuix.github.io/research/denoise.html   我不会告诉你这里的代码都是f ...

  7. git 常用命令粗略总结

    本文版权归cxun所有,如有转载请注明出处与本文链接,谢谢!原文地址:http://www.cnblogs.com/cxun/p/5630190.html git的功能很强大,但是其实很简单,用来用去 ...

  8. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  9. [转]在 Web 项目中应用 Apache Shiro

    目录[-] 用户权限模型 图 1. 用户权限模型 认证与授权 Shiro 认证与授权处理过程 Shiro Realm 清单 1. 实现自己的 JDBC Realm 为何对 Shiro 情有独钟 与 S ...

  10. False 等效值

    False 等效值 下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("&quo ...