使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

当要在有限的空间展示更多的信息时，我们经常会采取鼠标滑过弹出更多相关信息层，提高互动性。尤其可以应用在公司照片墙、招聘网站求职者信息展示等等场景。

本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果。当鼠标滑向照片时，会弹出对应的照片的详细介绍信息，请看演示效果：

效果展示源码下载

超文本标记语言

首先我们准备页面素材，页面上由多组图片里密集组成，同时有图片对应的相关说明信息，用于展示详细信息效果。

div class=' demo ' ul id=' Album ' lia href=' # ' em/emimg src=' http : images/2012/05/18/朱铁18274938。jpg/a div class=' Album _ info ' strong孟祥义/strongspan企业主/spanspani建筑/ii北京市/i/span/div /li./ul /div CSS

我们需要使用半铸钢钢性铸铁(铸造半钢)将图片紧密排列在一起，并且默认图片对应的信息为隐藏状态。演示{ width : 714 pxmargin :50 px汽车；} #相册李相册{ list-style:无；} #相册{位置：相对；背景： url(images/loader.gif)无重复中心；高度： 203px} #相册li {左侧浮动：margin :1 px 1px 0px 0pxdisplay :内嵌} #相册li img {宽度： 50px高度： 50px} #相册。相册_大{float:右；} #相册。相册_大跨度{ width : 43px h8 : 31 pxbackground : URL(images/you _ s . png)；绝对位置：right : 0pxbottom : 0pxmargin : 0pxpadding : 0pxxtext-缩进：-999 px；飞越：隐藏；} .相册_大img { width: 101px！重要；高度： 101磅！重要；} #相册。相册_大a { width: 101px！重要；高度： 101磅！重要；} #相册Li strong { display : block color : # fffffont-size : 12px；线高： 16pxpadding: 0px 10px边距-top : 8px；空白： nowrap} #相册Li span { display : block color : # ffffont-size : 12px；线高： 16pxpadding: 0px 10px边距-top : 5px；空白： nowrap} #专辑阿利{ position : absolutez-index : 100；可见性：隐藏；} #专辑阿利em {宽度： 100%；绝对位置：top : 0pxleft : 0pxdisplay :无；opa city 3360 0.5 filter : alpha(不透明度=50);背景： # 000000;} #相册img { border: 0pxborder:无；} #相册。相册信息{显示：无；绝对位置：背景技术： # 4 BAE 41z索引：101;-moz-box-shadow : 0 10px # 000000；-web套件-box-shadow : 0 10px # 000000；盒影： 0 0 10px # 000000} #相册。相册_信息I { font-size : 12px右边距： 5px字体样式：正常；字体粗细：正常；} jQuery

展示效果所用的射流研究…代码已经封装在相册。js，在调用前先加载jquery.js和相册。射流研究…两个文件，然后直接调用效果，请看代码：

脚本类型=' text/JAVAScript ' src=' http : js/jquery。js /脚本脚本脚本类型=' text/JavaScript ' src=' http : js/Album。js /脚本脚本相册。集合(#相册')；/script在相册。射流研究…中，通过jquery控制元素的定位，以及鼠标滑过时，各种相对上下左右的位置展示效果，有兴趣的朋友可以翻看下相册。射流研究…中的相关代码。

以上内容是小编给大家介绍的使用jquery实现鼠标滑过弹出更多相关信息层附源码下载的全部内容，希望大家喜欢。