一站式服务包括哪些内容,网络规划设计师备考需要多久,做那个网站大全,wordpress搭建漫画站前言#xff1a;这是国外的一个教程#xff0c;我也很喜欢这个网页里面的教程#xff0c;主要技术是CSS3和JQuery以及一些JQuery的插件的应用#xff0c;当然从这些教程我也学到了他们制作时的一些思路#xff0c;就好像做数学题那样#xff0c;只要思路把握了#xff0…前言这是国外的一个教程我也很喜欢这个网页里面的教程主要技术是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. 之所以可以滚动是因为该层允许了出现滚动条但是父层设置了overflowhidden所以把滚动条的位置挤到父层的宽度外这样滚动条就可以不见了。                  3. 主要使用了Lightbox的插件。进入Lightbox的官网可以看到他的用法因为它是开源的github上面有它的源代码有空可以仔细看一下了解它的实现思路。   主要代码 1. 首先是HTML部分每一组照片使用一个DIV而且class为pb-wrapper来括住由于使用到Lightbox它需要在a标签里面增加rellightbox[组名]的属性链接地址为大图的位置。 div classpb-wrapper pb-wrapper-1 !--一组图片 该层也用于隐藏滚轮的--div classpb-scroll !--该层主要用来设置滚轮 --ul classpb-strip !--照片的列表 --lia hrefimages/large/1.jpg rellightbox[album1] titleSpring !-- 组名为album1 --img srcimages/small/1.jpg //a/lilia hrefimages/large/2.jpg rellightbox[album1] titleSunshineimg srcimages/small/2.jpg //a/lili !--...-- /li!--...--/ul/divh3 classpb-titlePure Serenity/h3/divpb-wrapper作为每一组照片公有的属性而细微差别需要区分的再加上pb-wrapper-nn表示第几个。这里的差别主要是位置高度还有旋转角度。 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