最近想做一个类似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. Jquery操作select,左右移动,双击移动 取到所有option的值

    $(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected& ...

  2. [转]在Ubuntu 14.04安装和使用Docker

    在Ubuntu 14.04安装和使用Docker 作者:chszs,版权所有,未经同意,不得转载.博主主页:http://blog.csdn.net/chszs Docker是一个开源软件,它可以把一 ...

  3. Linux上USB移植错误解决笔记

    在内核目录下先配置支持USB设备,无论你是什么设备,这一步都是必须的,USB驱动和其他的驱动不同,它分为USB设备驱动,另外还有USB-Host主机控制器的驱动,配置如下: Device Driver ...

  4. Java以基础类库

    Java以基础类库JFC(Java Foundation Class)的形式为程序员提供编程接口API,类库中的类按照用途归属于不同的包中. (一)java.lang包 Java最常用的包都属于该包, ...

  5. STL—Vector简介

    有关C++ STL 中的vector向量的用法(代码示例) 一. 简介 Vector是一个称为向量的顺序容器(不明白顺序容器与关联容器的可以Google). 二. 特点 1. 动态(相当于一个动态数组 ...

  6. C++ new和delete具体操作符是怎样的

    在C语言中,动态分配内存用 malloc() 函数,释放内存用 free() 函数.如下所示: int *p = (int*) malloc( sizeof(int) * 10 ); //分配10个i ...

  7. windows下使用火狐浏览器插件AutoProxy+MyEnTunnel+SSH访问海外站点（转）

    windows下使用火狐浏览器插件AutoProxy+MyEnTunnel+SSH访问海外站点   平时需要查阅一些技术资料,光走VPN太浪费流量,所以这儿教大家一种使用火狐浏览器的插件 AutoPr ...

  8. webpack模块依赖管理介绍

    http://webpack.github.io/docs/ webpack is a module bundler. 是一个模块管理器 webpack可以管理模块的依赖关系,并产生可以替代这些模块的 ...

  9. python 编辑xml中namespace问题中出现很多ns0

    原始文件:

  10. WPF中通过代码设置控件的坐标

    用WPF做贪吃蛇小游戏时,发现了一个问题: 贪吃蛇的移动,我是通过不断刷新Rectangle来实现(贪吃蛇的身体由一组Rectangle组成),因此需要不断调整Rectangle的坐标,但是WPF中没 ...