仿QQ空间个人中心送礼模块

web前端335409年前

仿QQ空间个人中心送礼模块: Demo演示

jquery代码(需预先引用jquery.js,你懂得yes):

$(document).ready(function(){$(".user_list ul li:first").addClass("active");$(".user_list ul li").hover(function(){$(this).addClass("active").siblings().removeClass("active");},function(){});});

CSS代码:

.user_list { width:170px; margin:auto; border:1px #ccc solid; overflow:hidden; zoom:1; }.user_list ul { list-style:none; }.user_list ul li { width:160px; float:left; padding:5px; border-bottom:1px #ccc solid; }.user_list ul li .head_img { width:35px; padding:3px 8px 0 0; float:left; }.user_list ul li .head_img img { width:35px; height:35px; }.user_list ul li .head_info { width:115px; float:left; line-height:20px; }.user_list ul li .head_name { width:88px; float:left; }.user_list ul li .head_songli { width:24px; float:left; }.user_list ul li .head_date { width:96px; padding-left:18px; background:url(https://www.toyean.com/tt/images/setting.gif) no-repeat 0 3px; color:#999; float:left; }.user_list ul li .head_hover { width:155px; border:1px #ccc solid; margin:2px; float:left; display:none; }.user_list ul li .gift_img { width:65px; float:left; padding:5px; }.user_list ul li .gift_img img { width:65px; height:65px; }.user_list ul li .gift_info { width:80px; float:left; line-height:18px; padding:3px 0; padding-bottom:0; }.user_list ul li .gift_info h3 a { color:#06c; font-size:12px; }.user_list ul li .gift_info span { width:80px; float:left; }.user_list ul li.active .head_hover { display:block; }

HTML代码:

<div class="user_list"><ul><li><div class="user_gift"><div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div><div class="head_info"><div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div><div class="head_date">九月十四 后天</div></div></div><div class="head_hover"><div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/13/64413.png" /></div><div class="gift_info"><h3><a href="#">生日蛋糕</a></h3><span>为你准备的生日蛋糕</span><span><a href="#">就送这个</a></span></div></div></li><li><div class="user_gift"><div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div><div class="head_info"><div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div><div class="head_date">九月十四 后天</div></div></div><div class="head_hover"><div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/14/65182.png" /></div><div class="gift_info"><h3><a href="#">芝士蛋糕</a></h3><span>芝士蛋糕,一猜你就想吃~</span><span><a href="#">就送这个</a></span></div></div></li><li><div class="user_gift"><div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div><div class="head_info"><div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div><div class="head_date">九月十四 后天</div></div></div><div class="head_hover"><div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/4/64644.png" /></div><div class="gift_info"><h3><a href="#">爱心蛋糕</a></h3><span>为你送上我真挚的爱心</span><span><a href="#">就送这个</a></span></div></div></li><li><div class="user_gift"><div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div><div class="head_info"><div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div><div class="head_date">九月十四 后天</div></div></div><div class="head_hover"><div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/10/64970.png" /></div><div class="gift_info"><h3><a href="#">开心巧克力</a></h3><span>知道你爱吃巧克力,开心吗</span><span><a href="#">就送这个</a></span></div></div></li><li><div class="user_gift"><div class="head_img"><img src="https://tp2.sinaimg.cn/1787516913/50/1282184635/1" /></div><div class="head_info"><div class="head_name"><a href="#">拓源网</a></div><div class="head_songli"><a href="#">送礼</a></div><div class="head_date">九月十四 后天</div></div></div><div class="head_hover"><div class="gift_img"><img src="https://cnc.qzonestyle.gtimg.cn/qzone/space_item/pre/13/65405.png" /></div><div class="gift_info"><h3><a href="#">美味童年</a></h3><span>让我们一起回忆美味的童年</span><span><a href="#">就送这个</a></span></div></div></li></ul></div>