返回顶部

收藏

jquery仿腾讯空间相册管理

更多
<!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 src="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://outofmemory.cn

标签:jquery,javascript,网页设计

收藏

0人收藏

支持

0

反对

0

发表评论