玩法介绍当前位置:万彩娱乐平台 > 玩法介绍 > >

万彩娱乐平台使用jquery实现鼠标滑过弹出更多相

  

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

  

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

  

  

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

  

  

  

效果展示 源码下载   

  

HTML  

  

首先我们准备页面素材,页面上由多组图片

  • 密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果万彩娱乐

      

      
      
      
      
        
    •   
      孟祥义企业主建筑  北京市
        
    •   ...

        

      
      
      

    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两个文件,然后直接调用效果,请看代码:  

      
      
      Album.set('#Album');  
      
      

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

      

      

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

      

    (责任编辑:admin)
  • 上一篇:今年薪酬涨幅前10职业出炉!跳槽必看

    下一篇:万彩娱乐注册jQuery绑定事件on()与弹窗的简要概述

    推荐内容

    客户服务热线

    010-400-12345

    在线客服