时间:2021-05-08
英文原文: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,若你了解个中因由,希望告知本站以及时纠正。
上一页12 下一页 阅读全文
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
iphone手机桌面效果,因为用了css3样式,只测试了谷歌浏览器。iphone手机桌面效果body,div,ul,li{padding:0;margin:0;
以其语法简单灵活而大受Webdesigner欢迎。所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动
学习使用jQuery创建一个确认对话框学习如何制作一个自动变换的幻灯片如何制作带缩略图的全屏图片画廊学习使用jQuery制作立体效果的滑动相册学习使用jQuer
网页设计制作,CSS实现隔行换色两种方法:第一种方法:以下为引用的内容:UL.myul1LI{background-color:expression(this.
CSS3PatternsGallery这个CSS3模式库展示了各种使用纯CSS3实现的网页背景效果,可以即时修改代码浏览效果,非常棒!LayerStyles这是