<!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 { 845px; height: 320px; overflow: hidden; margin: 80px auto; box-shadow: 0 0 10px 2px rgba(0,0,0,0.4); } #cdp ul { 3000px; } #cdp li { display: block; 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; 640px; } #cdp ul:hover li { 40px; } #cdp ul li:hover { 640px; } #cdp .title { position: absolute; left: 0; bottom: 0; 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>