- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>仿腾讯空间的好友管理列表效果</title>
- <script src1="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".photo_album li").hover(function(){
- $(this).find(".photo_list").addClass("photo_list_hover");
- },function(){
- $(this).find(".photo_list").removeClass("photo_list_hover");
- })
- })
- </script>
- <style type="text/CSS">
- .photo_album{width:800px;padding:10px;margin:50px auto;}
- .clear{zoom:1;}
- .clear:after{content:"";height:0;display:block;clear:both;visibility:hidden;}
- .photo_album li{float:left;width:150px;height:150px;position:relative;list-style-type:none;border-radius:5px;margin:0 20px;}
- .bg{position:absolute;border:solid 1px #ccc;width:100%;height:100%;background:#fcfcfc;border-radius:3px;}
- .b_1{left:0;top:0;}
- .b_2{left:2px;top:2px;z-index:2;}
- .b_3{left:4px;top:4px;z-index:3;}
- .b_3 h2,h1{margin:0;line-height:150px;text-align:center;font-family:"微软雅黑";font-size:24px;}
- h2{font-size:24px;}
- h1{font-size:30px;}
- .photo_list{width:170px;height:170px;position:absolute;left:50%;top:50%;margin-left:-85px;margin-top:-85px;z-index:4;background:#fcfcfc;overflow:hidden;visibility:hidden;-moz-transition:all 0.1s ease;border-radius:5px;border:solid 1px #ccc;}
- .photo_list_hover{visibility:visible;}
- .photo_list div{width:180px;padding:5px 5px 5px 6px;}
- .photo_list a{float:left;width:35px;height:35px;background:#E1E1E1;margin-right:6px;margin-bottom:6px;cursor:pointer;border-radius:5px;}
- .photo_list a:hover{background:#F9999B;}
- </style>
- </head>
- <body>
- <h1>jquery仿腾讯空间相册管理</h1>
- <ul class="photo_album clear">
- <li>
- <div class="b_1 bg"></div>
- <div class="b_2 bg"></div>
- <div class="b_3 bg"><h2>风景</h2></div>
- <div class="photo_list clear">
- <div>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- </div>
- </div>
- </li>
- <li>
- <div class="b_1 bg"></div>
- <div class="b_2 bg"></div>
- <div class="b_3 bg"><h2>建筑</h2></div>
- <div class="photo_list clear">
- <div>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- </div>
- </div>
- </li>
- <li>
- <div class="b_1 bg"></div>
- <div class="b_2 bg"></div>
- <div class="b_3 bg"><h2>美女</h2></div>
- <div class="photo_list clear">
- <div>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- </div>
- </div>
- </li>
- <li>
- <div class="b_1 bg"></div>
- <div class="b_2 bg"></div>
- <div class="b_3 bg"><h2>帅锅</h2></div>
- <div class="photo_list clear">
- <div>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- <a></a><a></a><a></a><a></a>
- </div>
- </div>
- </li>
- </ul>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/140820135148.html
来源: http://www.codesnippet.cn/detail/140820135148.html