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

浏览：898次- 评论：5次- 发布时间：2019-09-05

Html

Css

jquery仿腾讯空间相册管理

	
	
	
	
	
	
		风景
	
	
		
			
			
			
			
		
	
	
	
	
	
	
	
	
		建筑
	
	
		
			
			
			
			
		
	
	
	
	
	
	
	
	
		美女
	
	
		
			
			
			
			
		
	
	
	
	
	
	
	
	
		帅锅

.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 .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}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3