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 EasyUI $.Parser
Jun 02 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现tab栏切换效果
Dec 22 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
coffeescript使用的方式汇总
2015/08/05 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python获得图片base64编码示例
2014/01/16 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
Ajax的优点和缺点
2014/11/21 面试题
军训的自我鉴定
2013/12/10 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
入党积极分子考察意见
2015/06/02 职场文书
法定授权委托证明书
2015/06/18 职场文书
检讨书怎么写?
2019/06/21 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang