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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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中的integer类型使用分析
2010/07/27 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
django session完成状态保持的方法
2018/11/27 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python生成任意频率正弦波方式
2020/02/25 Python
python归并排序算法过程实例讲解
2020/11/04 Python
python asyncio 协程库的使用
2021/01/21 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
护理中职生求职信范文
2014/02/24 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
银行贷款承诺书
2014/03/29 职场文书
文明寄语大全
2014/04/11 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
倡议书格式模板
2014/05/13 职场文书
先进典型发言材料
2014/12/30 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
预备党员入党感想
2015/08/10 职场文书
大学生创业计划书
2019/06/24 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
Python机器学习之基础概述
2021/05/19 Python
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript