您的位置：首页 > Web前端 > JQuery

jQuery之手风琴图片

2016-04-21 12:11 609 查看 
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery之手风琴图片</title>
<base target="_blank" />
<style>
#cdp * {
margin: 0;
padding: 0;
}

#cdp ul {
list-style: none;
}

#cdp a {
text-decoration: none;
}

#cdp img {
border: none;
}

#cdp {
width: 845px;
height: 320px;
overflow: hidden;
margin: 80px auto;
box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
}

#cdp ul {
width: 3000px;
}

#cdp li {
display: block;
width: 140px;
height: 320px;
position: relative;
float: left;
border-left: 1px solid #aaa;
box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

#cdp li img {
display: block;
width: 640px;
}

#cdp ul:hover li {
width: 40px;
}

#cdp ul li:hover {
width: 640px;
}

#cdp .title {
position: absolute;
left: 0;
bottom: 0;
width: 640px;
background: rgba(0,0,0,0.5);
}

#cdp .title a {
display: block;
color: #fff;
font-size: 16px;
padding: 20px;
}
</style>

</head>
<body>
<div id='cdp'>
<ul>
<li>
<div class='title'>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-001</a>
</div>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-001.jpg'>
</li>
<li>
<div class='title'>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-002</a>
</div>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-003.jpg'>
</li>
<li>
<div class='title'>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-003</a>
</div>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-005.jpg'>
</li>
<li>
<div class='title'>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-004</a>
</div>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-006.jpg'>
</li>
<li>
<div class='title'>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-005</a>
</div>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-002.jpg'>
</li>
<li>
<div class='title'>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html">bigbang-006</a>
</div>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-004.jpg">
</li>
</ul>
</div>
</body>
</html>


<head/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" //>
<title/>Jquery之手风琴图片</title/>
<base target="_blank" //>
<style/>
#cdp * {
margin: 0;
padding: 0;
}

#cdp ul {
list-style: none;
}

#cdp a {
text-decoration: none;
}

#cdp img {
border: none;
}

#cdp {
width: 845px;
height: 320px;
overflow: hidden;
margin: 80px auto;
box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
}

#cdp ul {
width: 3000px;
}

#cdp li {
display: block;
width: 140px;
height: 320px;
position: relative;
float: left;
border-left: 1px solid #aaa;
box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

#cdp li img {
display: block;
width: 640px;
}

#cdp ul:hover li {
width: 40px;
}

#cdp ul li:hover {
width: 640px;
}

#cdp .title {
position: absolute;
left: 0;
bottom: 0;
width: 640px;
background: rgba(0,0,0,0.5);
}

#cdp .title a {
display: block;
color: #fff;
font-size: 16px;
padding: 20px;
}
</style/>

</head/>
<body/>
<div id='cdp'/>
<ul/>
<li/>
<div class='title'/>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html"/>bigbang-001</a/>
</div/>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-001.jpg'/>
</li/>
<li/>
<div class='title'/>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html"/>bigbang-002</a/>
</div/>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-003.jpg'/>
</li/>
<li/>
<div class='title'/>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html"/>bigbang-003</a/>
</div/>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-005.jpg'/>
</li/>
<li/>
<div class='title'/>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html"/>bigbang-004</a/>
</div/>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-006.jpg'/>
</li/>
<li/>
<div class='title'/>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html"/>bigbang-005</a/>
</div/>
<img src='http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-002.jpg'/>
</li/>
<li/>
<div class='title'/>
<a href="http://www.cnblogs.com/caidupingblogs/gallery/818864.html"/>bigbang-006</a/>
</div/>
<img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/818864/o_bigbang-004.jpg"/>
</li/>
</ul/>
</div/>
</body/>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航