可显示、隐藏说明的图片展示效果，带Loading

答案：<!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>
<title>可显示、隐藏说明的图片展示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
}
ol, ul {
    list-style: none outside none;
}
a {
	color: #FF6600;
}
a:hover {
	text-decoration: none;
}
#content {
	width: 750px;
    background: #FFFFFF;
	margin: 0 auto;
	padding: 20px 0;
    border-radius: 5px 5px 5px 5px;
}
#content ul.posts {
    width: 700px;
    margin: 0 auto;
}
#content ul.posts li.post a {
    color: #333333;
    padding: 0;
}
#content ul.posts li.post img.post-tn {
    height: 240px;
    width: 700px;
}
#content .posts .excerpt {
    display: none;
    padding: 0 0 10px;
}
#content ul.posts li.post div.load-excerpt {
    background: #507596;
    height: 3px;
    position: absolute;
    top: -5px;
    width: 300px;
}
#content .posts .excerpt p {
    padding: 0 10px 0.5em;
	line-height: 150%;
}
#content ul.posts li.post {
    background: #FFFFFF;
    color: #666666;
    height: 240px;
    margin-bottom: 20px;
    position: relative;
}
#content ul.posts li.post h2 {
    text-indent: -9999px;
}
</style>
<script src="/jscss/demoimg/201205/script.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
	<ul class="posts">
		<li class="post">
			<div class="excerpt"><p>1912年4月10日，承载着民众万千希望的豪华游轮泰坦尼克号鸣着震耳欲聋的汽笛， Billy Zane 饰）相对而坐，可是罗丝从心底反感这样虚华无实的生活。绝望之际，她结识了不名一文的青年画家杰克（莱昂纳多·迪卡普里奥 Leonardo DiCaprio 饰）。</p></div>  
			<a href="#"><img width="700" height="240" title="" alt="Titanic 3d" src="/jscss/demoimg/201205/Titanic-3d-Rose.jpg"></a>
		</li>
		<li class="post">
			<div class="excerpt"><p>杰克靠赌博赢得了下等舱的船票，他带着金丝雀一般的罗丝冲破樊笼，在底下层民众中间尽情享受人生的快乐。短短几然而横在他们中间的不仅有氏族阶层的坚固樊篱，更有一场史无前例的大灾难。罗丝和芽面临着生与死的严酷考验……</p></div>  
			<a href="#"><img width="700" height="240" title="" alt="Titanic 3d" src="/jscss/demoimg/201205/Titanic-3d-Jack-Rose.jpg"></a>
		</li>
		<li class="post">
			<div class="excerpt"><p>本片根据真实事件改编，是1997年《泰坦尼克号》的3D重制版本。</p></div>  
			<a href="#"><img width="700" height="240" title="" alt="Titanic 3d" src="/jscss/demoimg/201205/Titanic.jpg"></a>
		</li>
	</ul>
</div>
</body>
</html>
上一个：图片滚动代码，图片链接上下滚动效果
下一个：仿QQ商城焦点图jquery幻灯特效代码
更多图片编程知识: