当前位置:Web前端 > jquery> 正文

jquery鼠标滑过显示提示框

时间:2014-12-5类别:Web前端

jquery鼠标滑过显示提示框

jquery鼠标滑过显示提示框

一、jquery鼠标滑过显示提示框实例一

1、效果图

2、实现代码 ( 需要自行添加  jquery.js、按钮图片、提示框图片  )

 

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Animated Menu Hover 1</title>
    
    <script type="text/javascript" src="jquery。js"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    
     $(".menu li").hover(function() {
    
      $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
    
     }, function() {
    
      $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
    
     });
    
    });
    
    </script>
    
     
    
    <style type="text/css">
    
    body {
    
     margin: 10px auto;
    
     width: 570px;
    
     font: 75%/120% Arial, Helvetica, sans-serif;
    
    }
    
    .menu {
    
     margin: 100px 0 0;
    
     padding: 0;
    
     list-style: none;
    
    }
    
    .menu li {
    
     padding: 0;
    
     margin: 0 2px;
    
     float: left;
    
     position: relative;
    
     text-align: center;
    
    }
    
    .menu a {
    
     padding: 14px 10px;
    
     display: block;
    
     color: #000000;
    
     width: 144px;
    
     text-decoration: none;
    
     font-weight: bold;
    
     background: url('背景图片1') no-repeat center center;
    
    }
    
    .menu li em {
    
     background: url('背景图片2') no-repeat;
    
     width: 180px;
    
     height: 45px;
    
     position: absolute;
    
     top: -85px;
    
     left: -15px;
    
     text-align: center;
    
     padding: 20px 12px 10px;
    
     font-style: normal;
    
     z-index: 2;
    
     display: none;
    
    }
    
    </style>
    
    </head>
    <body>
    <ul class="menu">
    
     <li>
    
      <a href="http://www.studyofnet.com">Web Designer Wall</a>  
    
      <em>A wall of design ideas, web trends, and tutorials</em>
    
     </li>
    
     <li>
    
      <a href="http://www.studyofnet.com">Best Web Gallery</a>
    
      <em>Featuring the best CSS and Flash web sites</em>
    
     </li>
    
     <li>
    
      <a href="http://www.studyofnet.com">N.Design Studio</a>
    
      <em>Blog and design portfolio of WDW designer, Nick La</em>
    
     </li>
    
    </ul>
    
    </body>
    </html>
     
    		
  •  

    二、jquery鼠标滑过显示提示框实例二

    鼠标划过用户名时,在鼠标右下角显示li展示用户资料这个效果

    1、效果图

    2、实现方式

    无非就三大块,一个是li的定位,这个是该效果的主要难点;二个是通过ajax异步加载数据;第三个就是要用到两个js属性onmouseover和onmouseout,即鼠标经过和鼠标离开。

     

    3、实现步骤

    (1)、首先设计好要显示用户资料的li的样式,  这里要注意的该方法不是给每个用户名的旁边都绑定一个li,当鼠标经过时显示,鼠标离开时隐藏,网页里就一个显示信息的li,哪里需要显示时就定位在哪里,这要就需要把该li的定位方式设置为绝对定位。

  •  
  • HTML 代码   复制
  • 
    <li class="blockli" id="blockli">
                <li class="pic">
                    <img src="../../Users/images/899。png" id="imguserhead" />
                </li>
                <li class="box">
                    <table width="220" border="0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                        <tr>
                            <td style="width: 70px;">用户名:</td>
                            <td>
                                <label id="lblusername"></label>
                            </td>
                        </tr>
                        <tr>
                            <td>真实姓名:</td>
                            <td>
                                <label id="lblrealname"></label>
                            </td>
                        </tr>
                        <tr>
                            <td>性别:</td>
                            <td>
                                <label id="sex"></label>
                            </td>
                        </tr>
                        <tr>
                            <td>所属地区:</td>
                            <td>
                                <label id="lbladdress"></label>
                            </td>
                        </tr>
                        <tr>
                            <td>邮箱:</td>
                            <td>
                                <label id="lblemall"></label>
                            </td>
                        </tr>
                    </table>
                    <li style="text-align: left; color: green; line-height: 40px; height: 30px; display: none;" id="messageli ">正在加载中...</li>
                </li>
    
            </li>
    
    		
  • (2)、相应css代码

     

  •  
  • CSS 代码   复制
  • 
    #blockli{
        width:380px;
        height:160px;
        float:left;
        display:none;
        border: 1px solid #ccc;  position: absolute; z-index: 1; opacity: 0.1; background: white
        }
        .pic{
            width:100px;
    标签:
  • 上一篇下一篇

    猜您喜欢

    热门推荐