记得我第一次研究这个效果的时候,还是在2011年的这个时候。那时候刚毕业,对jquery挺感兴趣。可是研究了好久都没有弄出来。有一天,是个周末。我自己窝在家里研究了一天, 写了一个差不多效果的出来,一共就8行js代码。 最后我在qq空间发了一条状态,“8行代码写了一天”。 记得你还给我回复了。回复了一条“厉害啊”。
沧海桑田,时光流转。此刻我们已经分手。犹记得当时每周周末都去找你,一块儿过周末。拉着你的手,和你开玩笑逗你玩。那些无法返回的时光,整整五年半的时间。你挥手离去,剩我在原地。
今天总算找时间把这个效果写出来了。把它记在这里,一方面是为了下次好找。另一方面,怀恋一下我工作以后这逝去的两年,怀恋一下我那逝去的青春,怀恋一下我那逝去的你。
骚年,继续努力!!!!!!!!!
效果图:
关键点:
1、 show_card 这个 css。它必须是左浮动。这样隐藏的层在相对定位设置为left:0,top:0的时候才会在父div的最左上角出现。
2、头像用img标签,并设置他的z-index。设置的值要大于隐藏的详细信息的div的z-index。
代码如下:
<!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> <title></title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript" > </script> <style type="text/css"> *{ margin:0; padding:0; } .msgcard{ cursor:pointer; float:left; width:150px; border:1px solid #999999; border-right:none; height:300px; } .show_card{ float:left; font-size:12px; } .hide_card{ display:none; position:relative; left:-1px; top:-1px; border:1px solid #CCCCCC; z-index:100; font-size:12px; background: white; height:200px; width:400px; padding-top:20px; } .hide_card div{ margin-left:130px; margin-top:5px; } .content_msg{ font-size:13px; background:#EEF7FC; float:left; height:300px; width:550px; border:1px solid #999999; } .row{ width:900px; margin-left:auto; margin-right:auto; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".msgcard").hover(function(){ $(this).children(".hide_card").show(); },function(){ $(this).children(".hide_card").hide(); }); }) </script> </head> <body> <div style="position:absolute; left:100px; top:200px"> <div class="row"> <div class="msgcard"> <div class="show_card"> <img src="noavatar_middle.gif" width="120px" height="120px" style="margin-left:5px; margin-top:5px; position:relative; z-index:101" /> </div> <div class="hide_card"> <div>昵称:lxl631</div> <div>身份:举人</div> <div>金币:900000</div> </div> </div> <div class="content_msg"> 文章文章 </div> </div> </div> </body> </html>
相关推荐
适合做网站上会员头像排列效果,当鼠标悬停在头像上,当前头像高亮显示,并显示对应的文字说明,效果很不错 使用方法: 1、在网页head中引入lanrenzhijia.css样式以及jquery库 2、将html代码复制到你...
jquery pinwheel提示插件仿新浪微博鼠标悬停图片头像提示用户个人
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
Jquery鼠标悬停滑动下拉菜单代码是一款蓝色风格样式的jquery导航菜单。
鼠标悬停,图片局部缩放鼠标悬停,图片局部缩放鼠标悬停,图片局部缩放鼠标悬停,图片局部缩放鼠标悬停,图片局部缩放
动感鼠标悬停代码特效是一款用CSS3制作的动画切换效果,鼠标移到图片上动画切换显示文字描述特效,通常用于导航栏目、会员头像上面。
html5结合jquery hover实现的图片悬停放大特效,根据冒泡事件实现的悬停放大,在排列成“心”形的照片墙上,鼠标悬停于任意一张头像图片后,该图片即可放大显示,此类效果在HTML5的页面中,利用相关属性来实现,是挺...
就像QQ头像一样,鼠标放在对应的头像会浮出相应的信息。这个小demo是浮现出对应的图片,相应的介绍你都可以写在图片中。代码简单易懂。
jQuery鼠标悬停遮罩效果投票代码是一款基于jQuery实现的头像征名投票功能,鼠标经过显示征名释义。
今天给大家介绍利用纯css3实现非常实用的鼠标悬停特效,这款特效是当鼠标经过时候一个半透明的遮罩层倒下,视觉感很好,高大上的感觉扑面而来,代码也很简单,感兴趣的可以来学习一下
VB-MouseMove的用法,当鼠标路过不同图片时,状态栏将显示不同的状态和鼠标的位置,也就是显示鼠标的坐标。当鼠标悬停在对应的头像上时,状态栏显示该头像的文字提示,表明该图标是生气或是喜悦。
jQuery鼠标悬停遮罩效果投票代码是一款基于jQuery实现的头像征名投票功能,鼠标经过显示征名释义。
Query鼠标经过方形切换成圆边特效是一款效果不错的鼠标悬停头像修边变化特效,适合做头像展示使用。
本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考,具体如下: 我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动...
CSS3卡通小鸟头像旋转动画特效是一款基于css3 transform属性实现的鼠标悬停小鸟头像切换特效。
作为2005年的第一个重要版本,QQ2005beta2私服咨询版 将与... 另外,当鼠标悬停在左上方的头像和号码处或者消息对话框的边缘处(可定制),将显示对方的 IP 信息及地理位置,此时单击鼠标右键可将 IP 信息复制到剪贴板。
用QT QListView写的仿微信好友列表,列表仿微信好友列表(头像+上下双行数据),还有单击获取信息的功能;效果图在 https://blog.csdn.net/u014385680/article/details/104963956
JQuery仿照新浪微博提示框(确认框)插件 jQuery-smoothCo
CSS3悬停展开旋转菜单特效是一款鼠标移动到头像上就会展开旋转菜单特效。
(因上传资源不可加图片 详细效果点我头像 web专栏里发布了文章进行详细展示) 作品设计说明与功能实现: 该作品运用web网页制作整本书知识综合实现,看各老师要求,基本符合80%~100%的要求。 导航栏,最左上角为...