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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
js利用拖放实现添加删除
Aug 27 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
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
python写日志封装类实例
2015/06/28 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
Linux的文件类型
2012/03/07 面试题
给水工程专业毕业生自荐信
2014/01/28 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
岗位廉政承诺书
2014/03/27 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
学生党员检讨书范文
2014/12/27 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
人生遥控器观后感
2015/06/11 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
python使用glob检索文件的操作
2021/05/20 Python
深入理解redis中multi与pipeline
2021/06/02 Redis
springboot读取resources下文件的方式详解
2022/06/21 Java/Android
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js