纯CSS的相册图片展示(书签应用)
2007-10-11 08:59
357 查看
国庆节回来，这回着实是踏踏实实的休息了一次，感觉精神好多了。活是干了一点，不过睡得放心多了。尤其是昨晚的台风影响，感觉好凉爽，一觉居然睡了10个小时。
今天上班把以前写的一个东东整理了一下，不过还是有不少的缺憾在里面，感兴趣的朋友看看就可以了：）
其实这个东东已经有很多人写过了，不过还是把自己整理的贴出来大家瞧瞧，看还可以怎么改进。
先看看Demo吧：
［效果演示：http://www.doyoe.com/model/xhtmlcss/style/imgview/1.htm］
CSS部分：
a {
font:bold 12px/20px "宋体",sans-serif;
text-decoration:none;
}
#dyimgview {
width:260px;
}
#dyimgview h3 {
width:100%;
margin:10px 0;
overflow:hidden;
}
#dyimgview h3 a {
display:block;
width:20px;
height:20px;
margin:2px;
color:#fff;
text-align:center;
background-color:#aaa;
float:left;
}
#dyimgview h3 a:hover {
color:#f00;
background-color:#000;
}
#dyimgview ul {
margin:0;
padding:0;
list-style:none;
border:10px solid #ddd;
overflow:hidden;
height:170px;
voice-family:"/"}/"";voice-family:inherit;
height:150px;
}
#dyimgview ul li {
height:150px;
}
#dyimgview ul img {
width:240px;
height:150px;
vertical-align:top;
border:none;
}
/*Tips效果*/
.tips span {
display:none;
cursor:pointer;
}
.tips:link,a.tips:hover {
display:block;
}
.tips:hover span {
display:block;
width:100%;
text-align:center;
position:relative;
z-index:99;
margin-top:-32px;
color:#fff;
background-color:#840606;
padding:0.2em 0;
filter:alpha(opacity=70);
opacity:0.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>纯CSS构造图片展示</title>
</head>
<body>
<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可以发现，这是通过书签来实现显示不同图片的效果，目前貌似只有IE，FF等浏览器支持，Opera下毫无效果（遗憾一）；而且不能为“1，2，3”指定“当前”效果样式（遗憾二），很难知道当前显示的是哪个部分的内容，不过应该有变通的方法，如果同学们有好的方法，不妨交流一下。
今天上班把以前写的一个东东整理了一下，不过还是有不少的缺憾在里面，感兴趣的朋友看看就可以了：）
其实这个东东已经有很多人写过了，不过还是把自己整理的贴出来大家瞧瞧，看还可以怎么改进。
先看看Demo吧：
［效果演示：http://www.doyoe.com/model/xhtmlcss/style/imgview/1.htm］
CSS部分：
a {
font:bold 12px/20px "宋体",sans-serif;
text-decoration:none;
}
#dyimgview {
width:260px;
}
#dyimgview h3 {
width:100%;
margin:10px 0;
overflow:hidden;
}
#dyimgview h3 a {
display:block;
width:20px;
height:20px;
margin:2px;
color:#fff;
text-align:center;
background-color:#aaa;
float:left;
}
#dyimgview h3 a:hover {
color:#f00;
background-color:#000;
}
#dyimgview ul {
margin:0;
padding:0;
list-style:none;
border:10px solid #ddd;
overflow:hidden;
height:170px;
voice-family:"/"}/"";voice-family:inherit;
height:150px;
}
#dyimgview ul li {
height:150px;
}
#dyimgview ul img {
width:240px;
height:150px;
vertical-align:top;
border:none;
}
/*Tips效果*/
.tips span {
display:none;
cursor:pointer;
}
.tips:link,a.tips:hover {
display:block;
}
.tips:hover span {
display:block;
width:100%;
text-align:center;
position:relative;
z-index:99;
margin-top:-32px;
color:#fff;
background-color:#840606;
padding:0.2em 0;
filter:alpha(opacity=70);
opacity:0.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>纯CSS构造图片展示</title>
</head>
<body>
<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可以发现，这是通过书签来实现显示不同图片的效果，目前貌似只有IE，FF等浏览器支持，Opera下毫无效果（遗憾一）；而且不能为“1，2，3”指定“当前”效果样式（遗憾二），很难知道当前显示的是哪个部分的内容，不过应该有变通的方法，如果同学们有好的方法，不妨交流一下。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 纯CSS的相册图片展示
- MVP模式在Android中的应用之图片展示选择功能的框架设计
- 【又拍图片相册跨分页下载图片/本地图片】合并及文字水印——淘宝开店过程中的技术应用【提供源代码下载】
- css+js控制图片展示
- 图片展示应用中内存不断升高的问题
- CSS背景图片的应用
- CSS特殊样式（五）CSS3 text-fill-color简介及应用展示
- Css+Js图片滚动展示代码
- 论坛源码推荐（1月26日）：360°展示图片 应用Taasky的带有3D效果的折叠菜单
- css相册小应用
- iOS保存系统相册中的照片到应用沙盒中出现的问题--图片旋转90度，使用CGImageRelease造成应用崩溃
- html+css实现3D旋转图片展示
- html+css实现爱奇艺图片展示
- 鼠标经过图片时变换的两种方法--css+div及javascript应用
- CSS Image Sprite--网页图片应用处理方式
- css+div及javascript应用---------鼠标经过时图片变换的两种方法
- Android实现打开系统照相机&相册图片展示
- css sprite---css精灵网页图片应用处理方式分析
- 20160722关于保存应用图片到本地的相册
- Android基础--调用系统相机，打开相册，裁剪图片并展示到界面