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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP实现微信提现功能
2018/09/30 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python决策树分类算法学习
2017/12/22 Python
PyQT实现多窗口切换
2018/04/20 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
会计电算化个人求职信范文
2014/01/24 职场文书
爽歪歪广告词
2014/03/20 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
大二学生自我检讨书
2014/10/23 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS