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

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

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

效果展示     源码下载

HTML

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

<div class="demo">
    <ul id="Album">
    <li><a href="#" ><em></em><img src="images/2012/05/18/tiezhu18274938.jpg" /></a>
       <div class="Album_info"><strong>孟祥义</strong><span>企业主</span><span><i>建筑
</i><i>北京市</i></span></div>
    </li>
    ...
   </ul>
</div>

CSS

我们需要使用CSS将图片紧密排列在一起，并且默认图片对应的信息为隐藏状态。

.demo{width: 714px; margin:50px auto;}
#Album li,#Album { list-style: none;}
#Album{ position: relative; background: url(images/loader.gif) no-repeat center; height: 203px;}
#Album li { float: left; margin:1px 1px 0px 0px; display: inline;}
#Album li img { width: 50px; height: 50px;}
#Album .album_big {float: right;}
#Album .album_big span { width: 43px; height: 31px; background: url(images/you_s.png); position:
absolute; right: 0px;bottom: 0px; margin: 0px; padding: 0px; text-indent: -999px; overflow: hidden;}
.album_big img { width: 101px!important; height: 101px!important;}
#Album .album_big a { width: 101px!important;height: 101px!important;}
#Album li strong { display: block; color: #fff; font-size: 12px; line-height: 16px;
padding: 0px 10px;margin-top: 8px;white-space: nowrap;}
#Album li span { display: block; color: #fff; font-size: 12px; line-height: 16px;
padding: 0px 10px; margin-top: 5px; white-space: nowrap;}
#Album li a { position: absolute; z-index: 100; visibility: hidden;}
#Album li a em{ width: 100%;position: absolute; top: 0px; left: 0px; display: none; opacity: 0.5;
filter: alpha(opacity=50); background: #000000;}
#Album img { border: 0px; border: none;}
#Album .Album_info { display: none; position: absolute; background: #4bae41; z-index:101;
-moz-box-shadow: 0 0 10px #000000;-webkit-box-shadow: 0 0 10px #000000;box-shadow: 0 0 10px #000000;}
#Album .Album_info i{ font-size: 12px; margin-right: 5px; font-style: normal; font-weight: normal;}

jQuery

展示效果所用的js代码已经封装在album.js，在调用前先加载jquery.js和album.js两个文件，然后直接调用效果，请看代码：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/album.js"></script>
<script>
Album.set('#Album');
</script>

在album.js中，通过jquery控制元素的定位，，以及鼠标滑过时，各种相对上下左右的位置展示效果，有兴趣的朋友可以翻看下album.js中的相关代码。

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

赞 (0)

相关推荐

  • jquery实现鼠标滑过显示提示框的方法

    jquery实现鼠标滑过显示提示框的方法

    本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

  • jQuery实现的鼠标滑过弹出放大图片特效

    jQuery实现的鼠标滑过弹出放大图片特效

    本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等, 我们先来看个演示图 下面是代码实例: <link rel="stylesheet" href="../css/common.css" type="text/css" /> <script type="text/javascript" src="../

  • 基于jquery实现的鼠标滑过按钮改变背景图片

    复制代码 代码如下: $(document).ready(function () { //按钮样式切换 $("#btFeedBack").hover( function () { $(this).removeClass("btFeed").addClass("btFeedhover"); }, function () { $(this).removeClass("btFeedhover").addClass("btF

  • jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-

  • jquery实现鼠标滑过后动态图片提示效果实例

    jquery实现鼠标滑过后动态图片提示效果实例

    本文实例讲述了jquery实现鼠标滑过后动态图片提示效果.分享给大家供大家参考.具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {

  • JQuery实现鼠标滑过显示导航下拉列表

    当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="

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

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

    当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

  • 微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

    微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

    本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange=&qu

  • Jquery左右滑动插件之实现超级炫酷动画效果附源码下载

    Jquery左右滑动插件之实现超级炫酷动画效果附源码下载

    分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下,如果大家觉得还不错,很满意可以下载源码哦. 效果展示     源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="sl

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • JQuery实现简单的复选框树形结构图示例【附源码下载】

    JQuery实现简单的复选框树形结构图示例【附源码下载】

    本文实例讲述了JQuery实现简单的复选框树形结构图.分享给大家供大家参考,具体如下: 这是自己写的简单树形结构图,实现的功能有: 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的所有的子节点也选中:父节点未选中,则下面的所有的子节点也取消选中(全选和全不选) 3.选中一个子节点时相应的父节点也选中:当所有的子节点都没有选中时,父节点也取消选中 这是实现的最简单的功能.下面来具体的谈谈具体的实现: 1.引入库 所有的这些操作都是通过JQuery来实现的,所以首先要

  • Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示    源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse

  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示    源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • 基于jQuery实现交互体验社会化分享代码附源码下载

    基于jQuery实现交互体验社会化分享代码附源码下载

    先给大家展示下效果图,看看是不是亲想要的效果,如果满足您的要求请继续往下阅读. 效果展示       源码下载 基于jQuery交互体验社会化分享代码.这是一款鼠标点击分享按钮向右滑出腾讯微博,新浪微博,QQ空间,豆瓣,微信,二维码分享等分享平台. html代码: <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';clear:both;width:160px;margin:0 auto;"&

随机推荐