最近想做一个类似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. 常用prototype函数

    $("spcode").value --取得当前页面的值的value,可以赋值 $F('spcode')         --不能赋值 $!spcode             - ...

  2. csuoj 1119: Collecting Coins

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1119 1119: Collecting Coins Time Limit: 3 Sec  Memo ...

  3. 精华 对express中next函数的一些理解

        关于next主要从三点来进行说明: next的作用是什么? 我们应该在何时使用next? next的内部实现机制是什么? Next的作用 我们在定义express中间件函数的时候都会将第三个参 ...

  4. sql server 数据库 日期格式转换

    日期时间转字符串:Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), ...

  5. DOM的概念（1）

    什么是DOM? 通过 JavaScript,您可以重构整个HTML文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口 ...

  6. jsp+servlet 中文乱码问题

    一. 由于doget和dopost的处理方式不同,在做servlet的时候遇到这样一个问题:用doPost获得的参数只要加上“request.setCharacterEncoding("ut ...

  7. CDC的StretchBlt函数载入位图时图片失真问题

    最近遇到加载的bmp图片出现失真问题,查找得知需要用SetStretchBltMode函数设置拉伸模式. 函数原型:int SetSTretchBltMode(HDC hdc, int iStretc ...

  8. [SublimeText] 安装包管理

    由于各种访问原因,因此记录一下给自己使用,原文地址如下: http://www.bonusbits.com/wiki/HowTo:Setup_Package_Control_for_Sublime_T ...

  9. 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 第一个APP

    参考博文: [Phonegap+Sencha Touch] 移动开发1.准备工作 [Phonegap+Sencha Touch] 移动开发2.PhoneGap/Cordova初步使用   经过差不多1 ...

  10. .NET 泛型分析

    .NET 泛型解析 一.问题背景 我们在编程的时候往往因为需要处理不同类型的数据或者对象,重复编写很多类似的代码,造成代码的冗余,代码也显得不那么优雅,泛型的出现,正好是为了解决这个问题,实现继承. ...