使用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,一经查实,立即删除!

相关文章

第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…

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;如下图 鼠标右键点…

第10章 Python 数字图像处理(DIP) - 图像分割 基础知识 标准差分割法

This Chapter is all about image segmentation. I still not finished whole chapter, but here try to publish some for reference. 这里写目录标题基础知识import sys import numpy as np import cv2 import matplotlib import matplotlib.pyplot as plt import PIL from …

OFBiz的探索进阶

主要参照https://cwiki.apache.org/OFBIZ/ofbiz-tutorial-a-beginners-development-guide.html这个教程&#xff0c;实现的过程教程上很详细&#xff0c;故这里不多说 还参考了下http://www.hotwaxmedia.com/apache-ofbiz-blog/ofbiz/ofbiz-tutorials/ofbiz-tutorial-building-…

对GCD的一些理解和实践

对GCD的一些理解和实践GCD GCD&#xff0c;全程Grand Central Dispatch&#xff0c;是苹果为了多核并行提出的解决方案。它是使用C语言实现&#xff0c;但是由于用了block来处理回调&#xff0c;所以使用起来十分方便。并且GCD会自动管理线程的生命周期&#xff0c;不需要我们去…

[Buzz Today]2012.08.08

# Dark Reign 2 源代码现身Google Code Pandemic工作室开发的即时战略游戏《Dark Reign 2》源代码被泄露到了Google Code http://code.google.com/p/darkreign2/ # Warsow 1.0发布 Set in a futuristic cartoonish world, Warsow is a completely free fast-paced first-person…

PyTorch训练中Dataset多线程加载数据,比Dataloader里设置多个workers还要快

PyTorch训练中Dataset多线程加载数据&#xff0c;而不是在DataLoader 背景与需求 现在做深度学习的越来越多人都有用PyTorch&#xff0c;他容易上手&#xff0c;而且API相对TF友好的不要太多。今天就给大家带来最近PyTorch训练的一些小小的心得。 大家做机器学习、深度学习都…

python调用摄像头人脸识别代码_利用face_recognition,dlib与OpenCV调用摄像头进行人脸识别...

用已经搭建好 face_recognition&#xff0c;dlib 环境来进行人脸识别 未搭建好环境请参考&#xff1a; 使用opencv 调用摄像头 import face_recognition import cv2 video_capture cv2.videocapture(0) # videocapture打开摄像头&#xff0c;0为笔记本内置摄像头&#xff0c;1…

【转】彻底搞清计算结构体大小和数据对齐原则

数据对齐: 许多计算机系统对基本数据类型合法地址做出了一些限制&#xff0c;要求某种类型对象的地址必须是某个值K(通常是2&#xff0c;4或8)的倍数。这种对齐限制简化了形成处理器和存储器系统之间的接口的硬件设计。例如&#xff0c;假设一个处理器总是从存储器中取出8个字节…

Pytorch 学习率衰减 之 余弦退火与余弦warmup 自定义学习率衰减scheduler

学习率衰减&#xff0c;通常我们英文也叫做scheduler。本文学习率衰减自定义&#xff0c;通过2种方法实现自定义&#xff0c;一是利用lambda&#xff0c;另外一个是继承pytorch的lr_scheduler import math import matplotlib.pyplot as plt import numpy as np import torch i…

c++ 字符串赋给另一个_7.2 C++字符串处理函数

点击上方“C语言入门到精通”&#xff0c;选择置顶第一时间关注程序猿身边的故事作者闫小林白天搬砖&#xff0c;晚上做梦。我有故事&#xff0c;你有酒么&#xff1f;C字符串处理函数C语言和C提供了一些字符串函数&#xff0c;使得用户能很方便地对字符串进行处理。这些是放在…