最近想做一个类似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. iOS -Swift 3.0 -for(循环语句用法)

    // // ViewController.swift // Swift-循环语句 // // Created by luorende on 16/12/08. // Copyright © 2016年 ...

  2. iOS获取当前AppStore版本号与更新

    - (void)checkUpdateWithAppID:(NSString *)appID success:(void (^)(NSDictionary *resultDic , BOOL isNe ...

  3. JQuery插件开发简单实例

    经常使用Jquery的各种插件,却对如何开发插件一无所知,以为是一件很麻烦的事儿?其实不然,下面通过一个简单的实例,来看一下Jquery Plugin的开发. 先看DEMO:动画菜单 不用插件如何实现 ...

  4. lintcode bugfree and good codestyle note

    2016.12.4, 366 http://www.lintcode.com/en/problem/fibonacci/ 一刷使用递归算法,超时.二刷使用九章算术的算法,就是滚动指针的思路,以前写py ...

  5. Java中对象创建过程

    本文介绍的对象创建过程仅限于普通Java对象,不包括数组和Class对象. 1.类加载检查 虚拟机遇到一条new指令时,首先去检查该指令的参数能否在常量池中定位到一个类的符号引用,并且检查这个符号引用 ...

  6. 搭建git for windows服务器

    文档出处 :http://blog.csdn.net/code_style/article/details/38764203 http://blog.csdn.net/aaron_luchen/art ...

  7. jQuery ajax的traditional参数的作用///////////////////////////////////zzzzzzzzzzz

    jQuery ajax的traditional参数的作用 i33 发布时间: 2013/04/03 10:05 阅读: 9859 收藏: 9 点赞: 1 评论: 0 一般的,可能有些人在一个参数有多个 ...

  8. simvision使用

    Access Design Source Code: 1)通过file---open来打开, 2)通过send to source viewer来看, 双击信号,进行driver的trace,显示在左 ...

  9. Linux下常用yum命令

    linux各发行版有多种包管理机制,下面介绍基于RedHat系的yum包管理命令: yum -y install xxx                                     无需询 ...

  10. Alwayson 与 mirror

    --将主副本改为同步模式和自动故障转移,将其中一个辅助副本改为同步辅助副本和自动故障转移 USE [master]GOALTER AVAILABILITY GROUP [TESTDB5AG]MODIF ...