jquery鼠标滑过显示提示框

更多时间：2014-12-5 类别：Web前端浏览量：718

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;

  标签：提示框

上一篇：_viewstart.cshtml的作用

下一篇：js回调函数

您可能感兴趣

jquery鼠标滑过显示提示框

jquery鼠标滑过显示提示框

热门推荐

排行榜