使用Lightbox制作照片条

前言:这是国外的一个教程,我也很喜欢这个网页里面的教程,主要技术是CSS3和JQuery以及一些JQuery的插件的应用,当然从这些教程我也学到了他们制作时的一些思路,就好像做数学题那样,只要思路把握了,就可以做出千变万化的题目。

教程地址:http://tympanus.net/codrops/2012/08/01/photo-booth-strips-with-lightbox/

demo地址:http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/

作品的截图:

作品的亮点:1. 当鼠标hover图片的时候,图片变得明亮和清晰。

                 2. 当鼠标在图片上,滚动滑轮的时候,图片列表也跟着滚动。

                 3. 当鼠标点击图片的时候,弹出该图片的大图,而且左右箭头实现该组的图片轮流展示。

 

实现的思路:1. hover的时候把透明度设置为1。

                 2. 之所以可以滚动是因为该层允许了出现滚动条,但是父层设置了overflow:hidden,所以把滚动条的位置挤到父层的宽度外,这样滚动条就可以不见了。

                 3. 主要使用了Lightbox的插件。进入Lightbox的官网可以看到他的用法,因为它是开源的,github上面有它的源代码,有空可以仔细看一下了解它的实现思路。

 

主要代码:

1. 首先是HTML部分,每一组照片使用一个DIV而且class为"pb-wrapper"来括住,由于使用到Lightbox,它需要在a标签里面增加rel="lightbox[组名]"的属性,链接地址为大图的位置。

<div class="pb-wrapper pb-wrapper-1">   <!--一组图片 该层也用于隐藏滚轮的--><div class="pb-scroll">             <!--该层主要用来设置滚轮 --><ul class="pb-strip">           <!--照片的列表 --><li><a href="images/large/1.jpg" rel="lightbox[album1]" title="Spring">    <!-- 组名为album1 --><img src="images/small/1.jpg" /></a></li><li><a href="images/large/2.jpg" rel="lightbox[album1]" title="Sunshine"><img src="images/small/2.jpg" /></a></li><li> <!--...--> </li><!--...--></ul></div><h3 class="pb-title">Pure Serenity</h3></div>

 "pb-wrapper"作为每一组照片公有的属性,而细微差别需要区分的再加上"pb-wrapper-n",n表示第几个。这里的差别主要是位置,高度还有旋转角度。

2.接下来是CSS部分

照片列是固定位置的,这样可以帮助我们定义相对于浏览器大小的高度,加上一些阴影还有一些背景,显得更好看一点。padding-bottom的大值为了预留位置给图片列的内容介绍。就是上面h3的那部分。

.pb-wrapper {position: fixed;background: #fff url(../images/paper.jpg) repeat center bottom;width: 170px;margin-top: 10px;padding: 20px 10px 100px;overflow: hidden;box-shadow:inset 1px 0 0 3px rgba(255,255,255,0.6),0 1px 4px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.05),inset 0 -25px 40px rgba(0,0,0,0.08);
}

使用伪类:after来放置一个圆圈来提示用户可以在上面使用滑轮滚动来使得图片滚动,再使用:before伪类在左边加多一些阴影。

.pb-wrapper:before {content: '';position: absolute;width: 2px;left: 0;top: 3px;bottom: 3px;box-shadow: 0 0 10px rgba(0,0,0,0.2);
}.pb-wrapper:after{position: absolute;content: '';background: rgba(192,227,232, 0.8) url(../images/scroll.png) no-repeat center center;width: 80px;height: 80px;top: 50%;left: 50%;margin: -75px 0 0 -35px;border-radius: 50%;z-index: 1000;
}

接着是标题h3的属性,这段文字设置不能被用户选择复制。

h3.pb-title {padding: 5px;font-family: 'Pacifico', Cambria, Georgia, serif;color: #374571;font-size: 14px;font-weight: 300;margin: 0;user-select: none;
}

带有class为"pb-scroll"的那一层,增加一个额外的padding用来把滚动条挤出到父层不显示的区域那里。

.pb-scroll {position: relative;height: 100%;width: 150px;padding-right: 30px;overflow-y: scroll;overflow-x: hidden;box-sizing: content-box;
}

但我们把鼠标移到图片列表上有一个明显的hover效果,主要是透明度的改变。

ul.pb-strip {padding: 0;list-style: none;position: relative;margin: 0 auto;width: inherit;opacity: 0.8;transition: all 0.3s ease-in-out;
}
.pb-wrapper:hover ul.pb-strip{opacity: 1;
}

接着是照片的微调

ul.pb-strip li {display: block;width: 150px;position: relative;margin-bottom: 7px;
}
ul.pb-strip li a {display: block;
}

每个a标签都设置了title属性,我们想把title的值显示到照片上来表明该照片的题目,这里使用了伪类:after,在content里面获取attr(title)的值

ul.pb-strip li a:after {position: absolute;z-index: 999;height: 20px;width: 120px;left: 10px;padding: 5px;bottom: 10px;background: rgba(255,255,255,0.6);content: attr(title);font-size: 13px;text-shadow: 0 1px 1px rgba(255,255,255,0.9);box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

在img上加上box-shadow为了让我们在整个照片列旋转的时候照片的锯齿不要太明显。

ul.pb-strip li img {display: block;box-shadow: 0 0 1px 1px #fff;
}

给每个照片组加上它们的位置,高度和旋转值

.pb-wrapper-1 {height: 89%;left: 20%;transform: rotate(3deg);
}.pb-wrapper-2 {height: 85%;left: 40%;transform: rotate(-2deg);
}.pb-wrapper-3 {height: 95%;left: 60%;transform: rotate(1deg);
}.pb-wrapper-4 {height: 75%;left: 80%;
}

3. 最后是lightbox.css的调整,主要是左右的箭头不要出现在图片上,出现在图片外面,确保图片的位置正确,还有箭头不要hover的时候才出现,还有一些文字的调整,还有这些的基础是要知道lightbox.js加了一些什么层在html文档时以及对于的ID和class。

#lightbox {font-family: inherit;padding: 0 85px;
}
.lb-outerContainer {overflow: visible !important;background: #fff url(../images/paper.jpg) fixed repeat top left;border-radius: 0px;max-width: 100%;height: auto !important;
}
.lb-container {padding: 0;
}#lightbox img.lb-image {padding: 10px;max-width: 100%;
}
.lb-nav {box-sizing: content-box;padding: 0 80px;left: -80px;
}
.lb-dataContainer {position: relative;max-width: 100%;
}.lb-data .lb-close {bottom: 10px;position: absolute;width: 73px;height: 73px;right: 5px;
}
.lb-prev, .lb-next {position: absolute;cursor: pointer;width: 60px;height: 60px;top: 50%;margin-top: -30px;
}
.lb-prev,
.lb-prev:hover{background: url(../images/prev.png) no-repeat 50% 50%;
}
.lb-next,
.lb-next:hover{background: url(../images/next.png) no-repeat 50% 50%;
}
.lb-data .lb-caption {font-family: 'Pacifico', Cambria, Georgia, serif;font-weight: 300;font-size: 30px;color: #fff;line-height: 32px;text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}.lb-data .lb-number {text-indent: 4px;color: #c0e3e8;
}

总结:其实这个作品给我觉得很好的地方就是鼠标滚动,图片相应滚动,可能是我没有仔细思考过吧,如果是我做的话,我第一时间想到是使用JS改变它的position来实现,但是没想到还有更好的方法。接下来就是想做一定的创新,但是现在还没想到更好方式。

转载于:https://www.cnblogs.com/zhuyingyan/archive/2012/08/04/2622675.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS- 如何改变section header

希望这个从UITableViewDelegate协议里得到的方法可以对你有所帮助&#xff1a; - (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {UIView *headerView [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.…

第6章 Python 数字图像处理(DIP) - 彩色图像处理2 - 灰度分层(灰度分割)和彩色编码,灰度值到彩色变换,Gray to RGB

第6章主要讲的是彩色图像处理&#xff0c;一些彩色模型如RGB&#xff0c;CMK&#xff0c;CMYK&#xff0c;HSI等色彩模型&#xff1b;彩色模型的变换关系&#xff1b;还包含由灰度图像怎样处理成假彩色图像&#xff1b;使用彩色分割图像等。本章比较少理论还有变换的描述&#…

值重新赋值_JavaScript-赋值运算符

好好学习&#xff0c;天天向上赋值运算符赋值运算符必须有变量参与运算&#xff0c;赋值运算符会做两件事情第一&#xff0c;将变量中原始值参与对应数学运算&#xff0c;与右侧的数据第二&#xff0c;将运算结果再重新赋值给变量变量位于操作符的左侧赋值运算符符号&#xff1…

超声换能器的原理及设计_超声波发生器、变幅杆、焊头的匹配介绍

一.超声波换能器原理与设计(超声波振动系统)匹配摘要&#xff1a;就塑料焊接机的超声波换能器系统进行设计和计算&#xff0c;并用PRO- E 三维软件绘出三维模型&#xff0c;最后进行频率分析&#xff0c;为超声波换能系统提供了有用的设计方法。关键词&#xff1a;超声波换能器…

位图法

判断集合中存在重复是常见编程任务之一&#xff0c;当集合中数据量比较大时我们通常希望少进行几次扫描&#xff0c;这时双重循环法就不可取了。位图法比较适合于这种情况&#xff0c;它的做法是按照集合中最大元素max创建一个长度为max1的新数组&#xff0c;然后再次扫描原数组…

CentOS查看和修改PATH环境变量的方法

为什么80%的码农都做不了架构师&#xff1f;>>> 查看PATH&#xff1a;echo $PATH 以添加mongodb server为列 修改方法一&#xff1a; export PATH/usr/local/mongodb/bin:$PATH //配置完后可以通过echo $PATH查看配置结果。 生效方法&#xff1a;立即生效 有效期限…

IOS简单的登陆界面

主要需要注意的几个问题&#xff1a; 1.导入图片方式最好用文件导入 代码: 在ViewController.m文件中 2.UILable常用属性 property(nonatomic,copy) NSString *text; //设置文本内容 property(nonatomic,retain) UIFont *font; //设置字体 …

第6章 Python 数字图像处理(DIP) - 彩色图像处理3 -色彩变换、彩色校正、彩色图像平滑和锐化、HSI彩色空间中的分割、RGB空间中的分割、彩色边缘检测

这里写目录标题色彩变换彩色图像平滑和锐化使用彩色分割图像HSI 彩色空间中的分割RGB空间中的分割彩色边缘检测彩色图像中的噪声色彩变换 # 图像颜色分量的显示 from PIL import Imageimg_ori Image.open(DIP_Figures/DIP3E_Original_Images_CH06/Fig0630(01)(strawberries_f…

javascript 在对象中使用 定时器_如何使用JavaScript 面向对象编程

学习目标理解面向对象开发思想掌握 JavaScript 面向对象开发相关模式面向对象介绍什么是对象Everything is object (一切皆对象)我们可以从两个层次来理解对象&#xff1a;(1) 对象是单个事物的抽象。一本书、一辆汽车、一个人都可以是对象&#xff0c;一个数据库、一张网页、一…

char数组转string_String类和其它数据类型的相互转换

对于上面的这些包装类&#xff0c;除了Character以外&#xff0c;都有可以直接使用字符串参数的构造函数&#xff0c;这也就使得我们将String类转换为这些数据类型变得相当之简单&#xff0c;即&#xff1a;Boolean(String s)、Integer(String s)、Long(String s)、Float(Strin…

ORACLE 各种闪回操作

1、Flashback Database&#xff08;利用闪回日志恢复&#xff09; Oracle Flashback Database特性允许通过SQL语句Flashback Database语句&#xff0c;让数据库前滚到当前的前一个时间点或者SCN&#xff0c;而不需要做时间点的恢复。闪回数据库可以迅速将数据库回到误操作或人为…

【转】介绍设置Session失效的几种方法

转载地址&#xff1a;http://developer.51cto.com/art/201106/269493.htm Session对象是HttpSessionState的一个实例。该类为当前用户会话提供信息&#xff0c;还提供对可用于存储信息会话范围的缓存的访问&#xff0c;以及控制如何管理会话的方法。下面介绍设置session失效的几…

mysql导入数据load data infile用法整理

有时候我们需要将大量数据批量写入数据库&#xff0c;直接使用程序语言和Sql写入往往很耗时间&#xff0c;其中有一种方案就是使用MySql Load data infile导入文件的形式导入数据&#xff0c;这样可大大缩短数据导入时间。 假如是从MySql客户端调用&#xff0c;将客户端的文件导…

python3循环一直到一个值结束_一步一步学Python3(小学生也适用) 第十七篇:循环语句for in循环...

一、Python for in循环Python for in 循环&#xff0c;是用来遍历任何数据序列&#xff0c;如一个列表&#xff0c;一个字符串&#xff0c;一个字典&#xff0c;一个元组等。for in 循环的一般语法如下&#xff1a;for item in 序列:语句块else:语句块for in 字符串&#xff1…

设置Jupyter notebook 默认工作路径,修改Jupyter notebook 默认浏览器为Chrome

这里写目录标题一 设置Jupyter notebook 默认工作路径二 修改Jupyter notebook 默认浏览器为Chrome一 设置Jupyter notebook 默认工作路径 安装好anaconda 后&#xff0c;jupyter notebook默认是有安装好的。在windows的菜单栏找到anaconda目录&#xff0c;如下图 鼠标右键点…

python调用c#注意事项_Python调用C#编写的DLL

起因是工作中需要用的开发编写的DLL&#xff0c;但是它是使用C#编写的&#xff0c;本人不想使用C#去写测试代码&#xff0c;所以需要使用Python来掉这个DLL内的方法 就用这个就很好&#xff0c;不要问为啥不用微软的Ironpython和别的啥&#xff0c;好用就行了&#xff0c;解决问…

jquery实战--定宽

大家有没有遇到过一个问题&#xff0c;就是一个列表&#xff0c;或是一段文字过多时&#xff0c;截取多余的部分用省略号&#xff0c;好吧&#xff0c;证明你实力的时候到了&#xff0c;我下面先分解一下方法&#xff0c;再用插件写出来,首先我们说的是&#xff0c;用到的第一个…

struts2 Action获取表单数据

1.通过属性驱动式 1.首先设置 表单中的数据的name值 如&#xff1a;<input type"text" name"username" value""> 2.你用的是struts2&#xff0c;那么就在java类中写一个变量&#xff1a;变量名和页面上的name值一致 并有这个变量的get 和…

python 计算器 eval ctf_CTF逆向--.NET与Python篇

题目(来源&#xff1a;Jarvis-OJ)&#xff1a;Classical CrackmeClassical CrackMe2FindKeyLoginClassical Crackme首先查壳没有壳&#xff0c;不过发现这是一个.net的程序&#xff0c;将其拖进dnSpy中&#xff0c;找到主程序&#xff0c;同时发现关键代码&#xff0c;如下所示…

2016年秋季个人阅读计划

阅读书目&#xff1a;《软件需求十步走》 读后感发表日期&#xff1a;阅读书目&#xff1a;《用户故事与敏捷方法》 读后感发表日期&#xff1a;第一篇&#xff1a;10月1日 第二篇&#xff1a;10月3日 第三篇&#xff1a;10月7日 第四篇&#xff1a;10月15日 第五篇&#xff1a…