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

小提示

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 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=""></a>
		</li>
		<li class="post">
			<div class="excerpt"><p>杰克靠赌博赢得了下等舱的船票，他带着金丝雀一般的罗丝冲破樊笼，在底下层民众中间尽情享受人生的快乐。短短几然而横在他们中间的不仅有氏族阶层的坚固樊篱，更有一场史无前例的大灾难。罗丝和芽面临着生与死的严酷考验……</p></div>  
			<a href="#"><img width="700" height="240" title="" alt="Titanic 3d" src="//ku.shouce.ren/files/images/201601/56a34a8b0545d.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="//ku.shouce.ren/files/images/201601/56a34a8cb7cee.jpg"></a>
		</li>
	</ul>
</div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

图片代码

描述

带Loading效果的可显示、隐藏说明的图片切换效果，鼠标不放在图片上的时候，不显示图片说明，当把鼠标放上去的时候，图片向下下沉一些，图片上部显示出图片描述，带有Loading进度条和动画效果的JavaScript图片展示。