CSS制作的类似相册浏览的功能

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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" />
<title>CSS相册浏览</title>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-780254-3";
urchinTracker();
</script>
<style type="text/css">
h2,ul,li{margin:0;padding:0;list-style:none;}
img{border:0;}
.imgview{
position:absolute;
top:30px;
z-index:80;
float:left;
width:857px;
height:auto;
min-height:440px;
}
	.imgview a{
	text-decoration:none;
	}
	.imgview h2{
	position:absolute;
	top:10px;
	left:10px;
	width:290px;
	height:30px;
	background-color:#FFFFFF;
	color:#000000;
	font-size:1.2em;
	text-indent:10px;
	line-height:30px;
	}
	.imgview ul{
	position:absolute;
	top:48px;
	left:10px;
	z-index:90;
	width:290px;
	height:auto;
	min-height:230px;
	background-color:#FFFFFF;
	}
	.imgview ul li{
	float:left;
	width:82px;
	height:59px;
	margin:8px 6px 7px;
	border:1px solid #DEDEDE;
	}
	.imgview ul li strong{
	display:none;
	}
	.imgview ul li a:hover{
	display:block;
	width:100%;
	height:100%;
	}
			.imgview ul li a:focus strong,
			.imgview ul li a:active strong{
			display:block;
			position:absolute;
			top:350px;
			left:300px;
			z-indent:100;
			width:537px;
			height:30px;
			background-color:#FFFFFF;
			color:#000000;
			text-indent:10px;
			line-height:30px;
			}
			.imgview ul li a:hover span img{
			position:absolute;
			top:240px;
			left:1px;
			width:200px;
			height:140px;
			}
			.imgview ul li a:active span img,
			.imgview ul li a:focus span img{
			position:absolute;
			top:-38px;
			left:300px;
			z-index:90;
			width:537px;
			height:380px;
			}
	.imgview ul li img{
	width:80px;
	height:57px;
	}
	.imgview .imgview-rep{
	position:absolute;
	top:287px;
	left:10px;
	z-index:10;
	width:201px;
	height:140px;
	border:1px solid #999999;
	color:#EFEFEF;
	font-size:2em;
	text-align:center;
	line-height:140px;
	}
	.imgview .imgview-bgtext{
	position:absolute;
	top:9px;
	left:309px;
	z-index:10;
	width:537px;
	height:380px;
	border:1px solid #999999;
	color:#EFEFEF;
	font-size:5em;
	text-align:center;
	line-height:380px;
	}
 
.imgtag{
position:absolute;
top:130px;
left:10px;
}
	.imgtag .tagname{
	float:left;
	width:100px;
	height:30px;
	text-align:center;
	line-height:30px;
	cursor:pointer;
	}
	.imgtag .tag1
	.imgtag .tag2,
	.imgtag .tag3{
	position:absolute;
	left:0;
	width:100px;
	}
	.imgtag .tag1{
	position:absolute;
	left:0;
	background-color:#BCC8C3;
	}
		.imgtag .tag1 .imgview{
		left:0;
		background-color:#BCC8C3;
		}
	.imgtag .tag2{
	position:absolute;
	left:102px;
	background-color:#BFB6B4;
	}
		.imgtag .tag2 .imgview{
		display:none;
		}
		.imgtag .tag2:hover .imgview{
		display:block;
		left:-102px;
		z-index:80;
		background-color:#BFB6B4;
		}
	.imgtag .tag3{
	position:absolute;
	left:204px;
	background-color:#CCC8BF;
	}
		.imgtag .tag3 .imgview{
		display:none;
		}
		.imgtag .tag3:hover .imgview{
		display:block;
		left:-204px;
		z-index:80;
		background-color:#CCC8BF;
		}

content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
 }
</style>
</head>
<body>
<p>CSS图片浏览效果</p>
<div class="imgtag">
	<div class="tag1">
	
	<div class="tagname">分类一</div>
		<div class="imgview">
			<div class="imgview-bgtext">PhotoView</div>
			<div class="imgview-rep">PhotoView</div>
			<h2>Photogallery 01</h2>
			<ul>
				<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fbf1a0b.gif" alt="photo1" /></span></a></li>
				<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fd7d625.gif" alt="photo2" /></span></a></li>
				<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fec7161.gif" alt="photo3" /></span></a></li>
				<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341ffed559.gif" alt="photo4" /></span></a></li>
				<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342019b323.gif" alt="photo5" /></span></a></li>
				<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342037bb0d.gif" alt="photo6" /></span></a></li>
				<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342046e638.gif" alt="photo7" /></span></a></li>
				<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a34205491bd.gif" alt="photo8" /></span></a></li>
				<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a3420625c8c.gif" alt="photo9" /></span></a></li>
			</ul>
		</div>
	
	</div>
	<div class="tag2">
	
	<div class="tagname">分类二</div>
		<div class="imgview">
			<div class="imgview-bgtext">PhotoView</div>
			<div class="imgview-rep">PhotoView</div>
			<h2>Photogallery 02</h2>
			<ul>
				<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fec7161.gif" alt="photo3" /></span></a></li>
				<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fd7d625.gif" alt="photo2" /></span></a></li>
				<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342019b323.gif" alt="photo5" /></span></a></li>
				<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342037bb0d.gif" alt="photo6" /></span></a></li>
				<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342046e638.gif" alt="photo7" /></span></a></li>
				<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fbf1a0b.gif" alt="photo1" /></span></a></li>
				<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a34205491bd.gif" alt="photo8" /></span></a></li>
				<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341ffed559.gif" alt="photo4" /></span></a></li>
				<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a3420625c8c.gif" alt="photo9" /></span></a></li>
			</ul>
		</div>
	
	</div>
	<div class="tag3">
	
	<div class="tagname">分类三</div>
		<div class="imgview">
			<div class="imgview-bgtext">PhotoView</div>
			<div class="imgview-rep">PhotoView</div>
			<h2>Photogallery 03</h2>
			<ul>
				<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fd7d625.gif" alt="photo2" /></span></a></li>
				<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341ffed559.gif" alt="photo4" /></span></a></li>
				<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342019b323.gif" alt="photo5" /></span></a></li>
				<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fec7161.gif" alt="photo3" /></span></a></li>
				<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a341fbf1a0b.gif" alt="photo1" /></span></a></li>
				<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a34205491bd.gif" alt="photo8" /></span></a></li>
				<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342037bb0d.gif" alt="photo6" /></span></a></li>
				<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a342046e638.gif" alt="photo7" /></span></a></li>
				<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="//ku.shouce.ren/files/images/201601/56a3420625c8c.gif" alt="photo9" /></span></a></li>
			</ul>
		</div>
	
	</div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS制作的类似相册浏览的功能

分类

图片代码

描述

用CSS制作一个ImageView，类似一个相册浏览的功能，重点研究一下层与布局，调用了一个远程Google的文件，整体效果感觉不错。