phpStudy
phpStudy
网站首页
软件下载
PHP教程
编程技术
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
window
Linux
Mac
ASP
服务器
CMS
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
PostgreSQL
SQLite
教程手册
php
html
html5
css
css3
JavaScript
ajax
jquery
sql
ado
asp
aspnet
browsers
careers
dhtml
dotnetmobile
dtd
e4x
glossary
hosting
htmldom
json
media
msnet
quality
rdf
rss
schema
semweb
site
sitemap
smil
soap
svg
tags
tcpip
vbscript
w3c
wap
web
webservices
wmlscript
wsdl
xforms
xhtml
xlink
xml
xmldom
xpath
xquery
xsl
xslfo
网站测速
小皮面板
智能dns
搜索
首页
PHP教程
ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果
英文原文:Sliding Photograph Galleries
翻译整理:西米CC-www.ximicc.com
效果
:
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>别开生面纯CSS实现相册预览 ximicc.com</title> <style type="text/css"> body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } #gallery { width:495px; height:240px; border: 1px solid #888; margin:0 auto; padding:0; list-style:none; background:#fff url(/files/080628/1_133958.gif); } #gallery li { float: left; } #gallery li a { display: block; width: 28px; height: 240px; border-right: #fff 1px solid; overflow: hidden; cursor: default; } #gallery li a img { border:0; } #gallery li a:hover { width: 320px; } #gallery2 { margin:0 auto; padding:0; list-style-type:none; overflow:hidden; width:572px; height:238px; border:1px solid #000; background:#fff url(/files/080628/1_134055.gif); } #gallery2 li { float:left; } #gallery2 li a { display:block; height:30px; width:572px; float:left; overflow: hidden; text-decoration:none; border-bottom:1px solid #000; cursor:default; } #gallery2 li a img { border:0; } #gallery2 li a:hover { background:#eee; height:144px; } #gallery2 li a:hover img { height:144px; } --> </style> </head> <body> <ul id="gallery2"> <li><a href="http://ximicc.com"> <img src="/files/080628/1_134205.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/files/080628/1_134245.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/files/080628/1_134317.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/files/080628/1_134352.jpg" alt="ximicc" title="ximicc" /></a></li> </ul> <div align="center"> <p><br /> <strong>原文地址:<a href="http://www.cssplay.co.uk/menu/gallery3l" target="_blank">Sliding Photograph Galleries</a></strong> <br /> <br /><strong>翻译整理:<a href="http://ximicc.com" target="_blank">西米CC www.ximicc.com</a></strong> <br /> <br /> </p><br /> </div> <ul id="gallery"> <li><a href="http://ximicc.com"><img src="/files/080628/1_134517.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/files/080628/1_134549.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/files/080628/1_134618.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/files/080628/1_134651.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/files/080628/1_134720.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/files/080628/1_134752.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/files/080628/1_134821.jpg" /></a></li> </ul> </body> </html>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
这是一个很简单的纯CSS相册滑动浏览效果,仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法,但是相比之下个人更喜欢横向滑动的那个。两者在缩略图的实现上有所区别,前者是采用收缩原始图片宽度的方法,会给人以很不自然的挤扁的感觉,而后者通过局部显示原始图片达到缩略的效果,虽然这种缩略图不能让我们概览整张图片,但我们可以通过提炼图片重点特征或添加说明文字等方法,来提升浏览者对图片的了解,最重要的是它在视觉协调性上更胜一筹。
首先来看一下XHTML部分,准备好七张相册图片以及一张默认的相册背景图win_backh.gif,把它们存储在网站的windows目录下,如前所述,七张图片的缩略图我们直接通过定义CSS来实现,不需要另外制作。我们以一个ul作为容器把这几张图片添加到页面中,并设置空链接,当然你也可以在链接中设置具体的地址:
<ul id="gallery">
<li><a href="#"><img src="windows/b1.jpg" /></a></li>
<li><a href="#"><img src="windows/b2.jpg" /></a></li>
<li><a href="#"><img src="windows/b3.jpg" /></a></li>
<li><a href="#"><img src="windows/b4.jpg" /></a></li>
<li><a href="#"><img src="windows/b5.jpg" /></a></li>
<li><a href="#"><img src="windows/b6.jpg" /></a></li>
<li><a href="#"><img src="windows/b7.jpg" /></a></li>
</ul>
在ul中我们只应用了一个名为gallery的样式,接下来的CSS都将针对#gallery及其下级元素进行定义。本例中的相册图片都有相同的尺寸320×240,背景图片的尺寸为495×240。注意这里背景图的宽度是根据本例的需要精确定义的,至于如何计算会在例子结束的时候进行说明。现在在浏览器中显示的仅仅是七张带圆点和默认链接边框的图片,接下来看一下#gallery中针对ul的样式设定:
#gallery {
width:495px;
height:240px;
border: 1px solid #888;
margin:0 auto;
padding:0;
list-style:none;
background:#fff url(windows/win_backh.gif);
}
ul元素的宽和高与背景图的尺寸保持一致,并设置了1px的外边框。本例中通过margin将整个相册居中,消除内填充以及默认的列表圆点符号。原文中#gallery还有一条overflow:hidden;语句,我把它去掉之后,相册效果在IE6和FF中依然正常,不知是不是在其它浏览器中会出现Bug,若你了解个中因由,希望告知本站以及时纠正。
«
»
PHP教程
PHP简介
PHP基本语法
PHP类型
PHP变量
PHP运算符
PHP控制结构
PHP函数
PHP类与对象
PHP异常处理
函数库分类
快速导航
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
Linux
Mac
ASP
服务器
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
SQLite
wamp
交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3