你的位置:首页 > Java教程

[Java教程]Jquery之手风琴图片


<!DOCTYPE HTML><html "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>

run: