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中的deferred使用方法
Mar 27 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
jquery中this的使用说明
2010/09/06 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
python实用代码片段收集贴
2015/06/03 Python
Python argv用法详解
2016/01/08 Python
python的socket编程入门
2018/01/29 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python机器学习之贝叶斯分类
2018/03/26 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
python中的tcp示例详解
2018/12/09 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python导入库的具体方法
2020/06/18 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
韩国11街:11STREET
2018/03/27 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
日语求职信范文
2013/12/17 职场文书
专家推荐信范文
2015/03/26 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技