最近想做一个类似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. [Android Tips] 25. ADB Command Note

    copy from https://github.com/operando/Android-Command-Note Android Command Note Logcat adb logcat -v ...

  2. Leetcode: Valid Word Abbreviation

    Given a non-empty string s and an abbreviation abbr, return whether the string matches with the give ...

  3. Java里List取并集方法retainAll不能用来判断是否有重复数据！

    网上找的源码 public boolean retainAll(Collection<?> c){     boolean modified = false;     Iterator&l ...

  4. Java中关于先有鸡还是先有蛋的问题----Class&Object

    在Java中,我们常常会看到一个类型:Class.并且在类似Person.class,cache.getClass()等代码中见到它的身影. 众所周知,Class是用来描述一个类的类型,而Object ...

  5. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  6. linux 配置 ftp

    1.检测是否安装ftp 2.apt-get install 安装 (如果安装失败 执行apt-get install update<如果update失败 配置dns让自己的服务器 可以ping ...

  7. linux命令行中单个减号表示标准输入输出流

    tar cvf - /src/myprojectsrc 这里本来是要输出到一个.tar文件的,目标.tar文件应该放在上面命令的减号处,因此这里的减号表示标准输出流. 减号单独作为命令行参数时,是标准 ...

  8. 【002：ESP8266 移植 Mqtt 】

    系统环境: ubuntu 16.04 64bitSDK版本: esp_iot_sdk_v1.3.0记录时间: 2016年10月13日联系方式: yexiaopeng1992@126.com 背景:在E ...

  9. just555 对话

    网易 新闻 2005-03-31 16:37:47 空!(19194697)555,你在大连炒单,单日最大盈利率多少? 2005-03-31 16:37:59 just555(79610908)最大1 ...

  10. Node.js中的Session，不要觉得简单哦。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .学习网站上有对应 ...