jQuery实现鼠标移到某个对象时弹出显示层功能


Posted in jQuery onAugust 23, 2018

本文实例讲述了jQuery实现鼠标移到某个对象时弹出显示层功能。分享给大家供大家参考,具体如下:

/**
* 鼠标移上去显示层
* @param divId 显示的层ID
* @returns
*/
$.fn.myHoverTip = function(divId) {
  var div = $("#" + divId); //要浮动在这个元素旁边的层
  div.css("position", "absolute");//让这个层可以绝对定位
  var self = $(this); //当前对象
  self.hover(function() {
    div.css("display", "block");
    var p = self.position(); //获取这个元素的left和top
    var x = p.left + self.width();//获取这个浮动层的left
    var docWidth = $(document).width();//获取网页的宽
    if (x > docWidth - div.width() - 20) {
    x = p.left - div.width();
    }
    div.css("left", x);
    div.css("top", p.top);
    div.show();
  },
  function() {
    div.css("display", "none");
  }
  );
  return this;
}

在哪个对象旁边显示DIV,随自己定义,只要定义一个ID即可:

如:

<a id="viewReInfo" href="#" rel="external nofollow" rel="external nofollow" >查看收件人回执情况</a>

需要显示的DIV,根据需求自己定义,同样只需定义ID即可:

如:

<div id="receiptInfo" class="receiptInfo">(3water.com 提示信息)</div>

调用上面的JS函数,代码如下:

$('#viewReInfo').myHoverTip('receiptInfo');

测试示例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery弹出提示框</title>
<style>
.receiptInfo{display:none;}
</style>
</head>
<body>
<a id="viewReInfo" href="#" rel="external nofollow" rel="external nofollow" >查看收件人回执情况</a>
<div id="receiptInfo" class="receiptInfo">(3water.com 提示信息)</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
/**
* 鼠标移上去显示层
* @param divId 显示的层ID
* @returns
*/
$.fn.myHoverTip = function(divId) {
  var div = $("#" + divId); //要浮动在这个元素旁边的层
  div.css("position", "absolute");//让这个层可以绝对定位
  var self = $(this); //当前对象
  self.hover(function() {
    div.css("display", "block");
    var p = self.position(); //获取这个元素的left和top
    var x = p.left + self.width();//获取这个浮动层的left
    var docWidth = $(document).width();//获取网页的宽
    if (x > docWidth - div.width() - 20) {
    x = p.left - div.width();
    }
    div.css("left", x);
    div.css("top", p.top);
    div.show();
  },
  function() {
    div.css("display", "none");
  }
  );
  return this;
}
$('#viewReInfo').myHoverTip('receiptInfo');
</script>
</body>
</html>

PS:感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

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

jQuery 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery手风琴的简单制作
May 12 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
JQuery扩展对象方法操作示例
Aug 21 #jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
菊花转动的jquery加载动画效果
Aug 19 #jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 #jQuery
jQuery UI实现动画效果代码分享
Aug 19 #jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
js获取url参数值的两种方式
2013/09/10 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
Python验证码识别处理实例
2015/12/28 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Django异步任务线程池实现原理
2019/12/17 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
Python列表如何更新值
2020/05/27 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
产品销售计划书
2014/05/04 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
毕业论文致谢范文
2015/05/14 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
运动会通讯稿300字
2015/07/20 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
postgresql中如何执行sql文件
2023/05/08 PostgreSQL