博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Jquery] 实现鼠标移到某个对象,在旁边显示层。
阅读量:7080 次
发布时间:2019-06-28

本文共 1098 字,大约阅读时间需要 3 分钟。

hot3.png

当鼠标移到某个地方的时候,在旁边飘出一个DIV,离开则消失。

是使用了某位大大封装的一个函数,稍微改了下。

原文地址: 

效果如下:

函数代码,放到一个JS文件里:

/**  * 鼠标移上去显示层  * @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="#" >查看收件人回执情况</a>

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

如:<div id="receiptInfo" class="receiptInfo"></div>

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

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

完事。哇哈哈,超简单。感谢原作者无私,强大啊!!

转载于:https://my.oschina.net/u/1381491/blog/182892

你可能感兴趣的文章
node.js REPL
查看>>
面试问题
查看>>
dhcp在企业网中的应用(案例)
查看>>
nginx(7):使用nginx的proxy_cache做网站缓存
查看>>
C++ explicit
查看>>
AngularJS内置指令
查看>>
冒泡排序算法分析
查看>>
Go函数
查看>>
青少儿书画 正式版发布
查看>>
RabbitMQ学习总结(6)——消息的路由分发机制详解
查看>>
ubuntu 12.04下安装google chrome
查看>>
大型网站技术架构(一)大型网站架构演化
查看>>
centos7精简系统服务和开机进程
查看>>
Maven学习总结(二)——Maven项目构建过程练习
查看>>
CEPH集群RBD快照创建、恢复、删除、克隆
查看>>
大型网站技术架构(六)网站的伸缩性架构
查看>>
MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突
查看>>
Linux发生问题怎么处理啊?建议流程是这样...[鸟哥的Linux私房菜]
查看>>
Mysql学习总结(6)——MySql之ALTER命令用法详细解读
查看>>
大型网站技术架构(五)网站高可用架构
查看>>