lightBox灯箱效果
最近想做一个类似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"><</span>
<span id="nextArrow">></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灯箱效果的更多相关文章
- 一款经典的 jQuery Lightbox 灯箱效果
一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...
- 20款美化网站的 jQuery Lightbox 灯箱插件
jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...
- 灯箱效果插件Magnific Popup详解
Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件.它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用. 官网地址: http://dimsemenov.co ...
- 30个Jquery灯箱插件
jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化. 下面 ...
- jQuery笔记总结
来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一 ...
- 【repost】jQuery笔记总结
第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 J ...
- 12款响应式 Lightbox（灯箱）效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...
- JS图片灯箱(lightBox)效果基本原理和demo
到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉 ...
- Strip JS – 低侵入，响应式的 Lightbox 效果
Strip 是一个灯箱效果插件,显示的时候只会覆盖部分的页面,这使得侵扰程度较低,并留出了空间与页面上的大屏幕,同时给予小型移动设备上的经典灯箱体验.Strp JS 基于 jQuery 库实现,支持 ...
随机推荐
- c语言简易版文法
文法 <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→ ...
- vue.js在windows本地下搭建环境和创建项目
Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...
- 解读ContentResolver和ContentProvider
转自:http://cthhqu.blog.51cto.com/7598297/1281217 1. ContentProvider的概述 ContentProvider: (Official Def ...
- [转]Linux/Ubuntu sudo不用输入密码的方法
通常我们并不以root身份登录,但是当我们执行某些命令 (command)时需要用到root权限,我们通常都是用"sudo command"来执行command.由于使用Ubu ...
- 漫谈java重载与重写
重载(Overloading):为了让方法名相同而形参不同的构造方法同时存在,让类以统一的方式处理不同类型数据的一种手段 重写(Overriding):导出类对继承自基类的方法做出一定的修改,又称方法 ...
- 关于g++编译模板类的问题
今天搞了我接近4个小时,代码没错,就是调试没有通过,无论怎么也没有想到是编译器的问题 g++不支持c++模板类 声明与实现分离,都要写到.h文件里面. 以后记住了.
- 细数那些我们都习惯了的Java谣言
我是一个Java的反对者,至于为什么,我想最大的一个原因是它不实在,不管是当年sun所说的一些言论,还是如今Java用户的一些言论,都有蛊惑之嫌,甚至很多太假了,而这些言论层出不穷,其实就语言本身我不 ...
- .net之工作流工程展示及代码分享（预告）
最近在帮公司做一个工作流程序模块,要求是可以嵌入到各种现有的程序中去.我想把自己制作的思路和过程同大家分享. 先上一张结构图: 由于该项目我一个人做,所以系统结构不能太复杂. 用到的技术主要有:DDD ...
- C语言回顾-指针
1.指针:地址 指针变量:存放指针的变量 指针变量的定义:数据类型 *指针变量名 或者 数据类型* 指针变量名 指针变量的初始化:int *p=&a;int *p=NULL;(不能先定义后初始 ...
- SSAS动态添加分区 (转载)
一.动态分区的好处就不说了,随着时间的推移,不可能一个度量值组都放在一个分区中,处理速度非常慢,如何动态添加分区,如何动态处理分区,成为了很多新手BI工程师一个头痛的问题,废话不多说,分享一下我的经验 ...