上一篇
下一篇
纯CSS的相册图片展示(书签应用)
作者:飘零雾雨 日期:2007-10-08
转载请注明出处，css探索之旅-飘零雾雨的庄园
国庆节回来，这回着实是踏踏实实的休息了一次，感觉精神好多了。活是干了一点，不过睡得放心多了。尤其是昨晚的台风影响，感觉好凉爽，一觉居然睡了10个小时。
今天上班把以前写的一个纯CSS的图片切换展示效果整理了一下，不过还是有不少的缺憾在里面，感兴趣的朋友看看就可以了：）
其实这个东东已经有很多人写过了，不过还是把自己整理的贴出来大家瞧瞧，看还可以怎么改进。
先看看Demo吧：
效果演示：［纯CSS构造图片切换展示效果beta1版］
CSS部分：
#dyimgview{
width:260px;
margin:auto;
}
#dyimgview h3{
width:100%;
margin:5px 0;
overflow:hidden;
}
#dyimgview h3 a{
display:inline;
float:left;
width:20px;
height:20px;
margin-right:2px;
background:#aaa;
color:#fff;
font:bold 12px/20px "宋体",sans-serif;
text-decoration:none;
text-align:center;
}
#dyimgview h3 a:hover{
background:#000;
color:#f00;
}
#dyimgview ul{
overflow:hidden;
height:170px;
list-style:none;
}
#dyimgview li{
height:150px;
border:10px solid #ddd;
vertical-align:middle;
}
#dyimgview li img{
width:240px;
height:150px;
vertical-align:top;
border:none;
}
/*Tips效果*/
.tips span{
display:none;
cursor:pointer;
}
.tips:hover{
background:none;
color:#FFF;
text-decoration:none;
}
.tips:hover span{
display:block;
position:relative;
width:100%;
height:25px;
margin-top:-32px;
background:#840606;
text-align:center;
line-height:25px;
filter:alpha(opacity=70);
-moz-opacity:.7;
opacity:.7;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>纯CSS使用书签构造图片切换展示效果beta1版 - Powered by 飘零雾雨</title>
<meta name="description" content="纯CSS之使用书签构造图片切换展示效果beta1版" />
<meta name="keywords" content="纯css, 书签, 图片切换, 图片展示" />
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<h1>纯CSS之使用书签构造图片切换展示效果beta1版</h1>
<p>请用鼠标点击下面的数字按钮：</p>
<div id="dyimgview">
<h3><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></h3>
<ul>
<li id="a"><a href="?" class="tips"><img src="1.jpg" alt="哇塞，美女耶" /><span>哇塞，美女耶</span></a></li>
<li id="b"><a href="?" class="tips"><img src="2.jpg" alt="喔，还是美女" /><span>喔，还是美女</span></a></li>
<li id="c"><a href="?" class="tips"><img src="3.jpg" alt="作者本人" /><span>作者本人</span></a></li>
</ul>
</div>
</body>
</html>
看Demo beta1版可以发现，这是通过书签来实现显示不同图片的效果，目前貌似只在Opera浏览器下毫无效果（遗憾一）；而且不能为“1，2，3”指定“当前”效果样式（遗憾二），很难知道当前显示的是哪个部分的内容，不过应该有变通的方法，如果同学们有好的方法，不妨交流一下。
后续将会有其它beta版本发布，希望最终能解决以上的2个遗憾，等有时间再来玩玩。
纯CSS构造图片切换展示效果beta2版，该版本尚未解决以上的2个问题，只是改善了下原有的切换外观和代码结构，为下版优化构造原型。
文章来自: 
引用通告: 
Tags: 
回复
Tips效果我有特别说明，祥见：http://blog.doyoe.com/article.asp?id=77