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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
JS图片预加载插件详解
Jun 21 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
PHP7新增函数
2021/03/09 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
javascript闭包入门示例
2014/04/30 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python连接池实现示例程序
2013/11/26 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python中的并发编程实例
2014/07/07 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python使用PyQt5的简单方法
2019/02/27 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python将unicode和str互相转化的实现
2020/05/11 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
测量工程专业求职信
2014/02/24 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
面试感谢信范文
2015/01/22 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书