精仿腾讯网页QQ空间的好友管理列表特效代码

稿源：互联网 2018-09-21 00:16:53 点击： 12408 撤稿纠错

腾讯网页QQ空间好友管理视觉的效果代码，喜欢的可以研究一下。。

以下讨论的是和腾讯 QQ空间好友管理相关的精仿腾讯网页QQ空间的好友管理列表特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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://www.alixixi.com/script/jquery-1.8.3.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>

关于精仿腾讯网页QQ空间的好友管理列表特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092184103.shtml方便下次再访问哦。

·上一篇： 表单文本框输入时提示文字消失的特效代码
·下一篇： JQUERY编写的一款简易伸展显示详情菜单特效

精仿腾讯网页QQ空间的好友管理列表特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻