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


Posted in Javascript onFebruary 05, 2015

本文实例讲述了jquery实现鼠标滑过显示提示框的方法。分享给大家供大家参考。具体如下:

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

1、效果图

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

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="https://3water.com">Web Designer Wall</a>  

  <em>A wall of design ideas, web trends, and tutorials</em>

 </li>

 <li>

  <a href="https://3water.com">Best Web Gallery</a>

  <em>Featuring the best CSS and Flash web sites</em>

 </li>

 <li>

  <a href="https://3water.com">N.Design Studio</a>

  <em>Blog and design portfolio of WDW designer, Nick La</em>

 </li>

</ul>

</body>

</html>

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

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

1、效果图

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

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" 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>

 <div style="text-align: left; color: green; line-height: 40px; height: 30px; display: none;" 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)、定位,为了能够精确的定位并且能够方便的调用,所以先在页面中放了两个标签,分别用于保存当前鼠标的坐标

<input type="hidden" id="pagex" />

<input type="hidden" id="pagey" />

然后用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代码

function ShowInfo(username) {

$("#blockdiv").css({

 "display": "block",

 "left": document.getElementById('pagex').value,

 "top": document.getElementById('pagey').value,

});

$("#messagediv").css("display", "block");

$.getJSON("../ashx/GetUserInfo。ashx?name=" + username,

 function (data) {

     if (data != null) {

  $("#lblusername").html(data[0].User_Count)

  $("#lblrealname").html(data[0].User_name);

  $("#sex").html(data[0].User_Sex);

  $("#lbladdress").html(data[0].User_Address)

  $("#lblemall").html(data[0].User_Email);

  if (data[0].User_HeadImg != null&&data[0].User_HeadImg != "") {

      $("#imguserhead").attr("src", "../../Users/" + data[0].User_HeadImg.toString().substring(3));

  }

  else {

      $("#imguserhead").attr("src", "../../Users/images/900.png");

  }

  $("#messagediv").css("display", "none");

     }

     else

  $("#messagediv").html("未加载到数据!");

 });

}

function HiddenInfo() {

    $("#blockdiv").css({

 "display": "none",

    });
    $("#lblusername").html("")

    $("#lblrealname").html("");

    $("#sex").html("");

    $("#lbladdress").html("")

    $("#lblemall").html("");

}

(5)、调用

<a class="showuserinfo" onmouseover="ShowInfo('<%#Eval("Response_Person") %>')" onmouseout="HiddenInfo()">

jquery鼠标滑过显示提示框

</a>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JavaScript函数模式详解
Nov 07 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
vue中如何让子组件修改父组件数据
Jun 14 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
javascript去除字符串左右两端的空格
Feb 05 #Javascript
jQuery判断对象是否存在的方法
Feb 05 #Javascript
jquery实现对联广告的方法
Feb 05 #Javascript
jquery实现在光标位置插入内容的方法
Feb 05 #Javascript
Jquery中offset()和position()的区别分析
Feb 05 #Javascript
JS实现一个按钮的方法
Feb 05 #Javascript
JS继承用法实例分析
Feb 05 #Javascript
You might like
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php中动态调用函数的方法
2015/03/16 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Django框架中方法的访问和查找
2015/07/15 Python
django站点管理详解
2017/12/12 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
大专生自荐信
2013/10/04 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
信息管理应届生求职信
2014/03/07 职场文书
双方协议书
2014/04/22 职场文书
社团活动总结
2014/04/28 职场文书
岗位安全生产责任书
2014/07/28 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
交通处罚决定书
2015/06/24 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
python APScheduler执行定时任务介绍
2022/04/19 Python