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>

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

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

1、效果图

2、实现方式

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

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

复制代码代码如下:

<div class="blockdiv" id="blockdiv"> <div class="pic">  <img src="../../Users/images/899。png" id="imguserhead" /> </div> <div class="box">  <table width="220" border="0" >      <tr>   <td >用户名：</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>  <div id="messagediv ">正在加载中...</div>     </div> </div>

(2)、相应css代码

复制代码代码如下:

#blockdiv{ 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; height:100px; border:1px solid #ccc; border-radius:10px;  float:left; margin:10px;  overflow:hidden; } .box{ width:240px; height:140px; margin:10px 0 10px 10px; float:left; overflow:hidden;text-overflow:ellipsis; white-space:nowrap;}

(3)、定位，为了能够精确的定位并且能够方便的调用，所以先在页面中放了两个标签，分别用于保存当前鼠标的坐标

复制代码代码如下:

然后用js获取当前坐标并保存到标签中：

复制代码代码如下:

jQuery(document).ready(function ($) { $(document).mousemove(function (e) {  document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。  document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置，相对于文档的上边缘。     }); });

(4)、鼠标经过和离开事件js代码

复制代码代码如下:

$("#lblusername").html("") $("#lblrealname").html(""); $("#sex").html(""); $("#lbladdress").html("") $("#lblemall").html(""); }

(5)、调用

复制代码代码如下:

<a class="showuserinfo" onmouseover="ShowInfo('<%#Eval("Response_Person") %>')" onmouseout="HiddenInfo()"> jquery鼠标滑过显示提示框 </a>

posted @ 2016-01-20 11:32 王传明阅读(294) 评论(0) 收藏举报

刷新页面返回顶部

王传明

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

公告