没错就是这个神奇的东西。。。还会根据布局自动选择浮在上方还是下方。。。
学习是最好的投资!
以前研究过这个问题,最后也实现了这个效果,贴下部分代码(很早以前写的,当时还没养成好的习惯,所以代码质量很差,题主主要参考思路即可):
Tooltip.prototype.show = function() { elTopLocation = this.getBoundingClientRect().top; elBottomLocation = window.innerHeight - this.getBoundingClientRect().bottom; elLeftLocation = this.getBoundingClientRect().left; elRightLocation = window.innerWidth - this.getBoundingClientRect().right; if(elLeftLocation < minVerticalDistance) { $(this).addClass('hint hint--right'); this.direction = 'right'; } else { if(elRightLocation < minVerticalDistance) { $(this).addClass('hint hint--left'); this.direction = 'left'; } else { if(elBottomLocation < minHorizonDistance) { $(this).addClass('hint hint--top'); this.direction = 'top'; } else { $(this).addClass('hint hint--bottom'); this.direction = 'bottom'; } } } };
大致讲下思路,先实现上下左右四种浮动效果,然后计算出元素相对于浏览器窗口的相对位置进行判断,继而选择特定的效果。 接受 @公子 批评,修改代码如下:
Tooltip.prototype.show = function() { elTopLocation = this.getBoundingClientRect().top; elBottomLocation = window.innerHeight - this.getBoundingClientRect().bottom; elLeftLocation = this.getBoundingClientRect().left; elRightLocation = window.innerWidth - this.getBoundingClientRect().right; var direction; direction = elLeftLocation < minVerticalDistance ? 'right' : 'left'; direction = elBottomLocation < minHorizonDistance ? 'top' : 'bottom'; $(this).addClass('hint hint--'+direction); return this.direction = direction; };
下次再也不敢贴奇葩代码了。
inspect element
position: absolute z-index: 9999 display: none|visible top: xxx left: xxx
基本思路: 1. 首先解决显示与否问题,涉及到js的hover事件,css的定位知识。当然也可以用:hover伪类实现,但是这样不能做判断。 2. 然后解决如何显示问题,根据头像距离屏幕区域四边的距离,按照上 > 下,右 > 左 的权重顺序显示。
如果一个页面中有多个头像,是不是每个头像都要做一个信息框啊?就像qq空间那样。还有就是信息框中的内容应该如何动态获取呢?
其实前端太好实现了,关键在于后台读取数据,用户数亿级别,如何快速获取用户相关信息才是关键。
以前研究过这个问题,最后也实现了这个效果,贴下部分代码(很早以前写的,当时还没养成好的习惯,所以代码质量很差,题主主要参考思路即可):
大致讲下思路,先实现上下左右四种浮动效果,然后计算出元素相对于浏览器窗口的相对位置进行判断,继而选择特定的效果。
接受 @公子 批评,修改代码如下:
下次再也不敢贴奇葩代码了。
inspect element
基本思路:
1. 首先解决显示与否问题,涉及到js的hover事件,css的定位知识。当然也可以用:hover伪类实现,但是这样不能做判断。
2. 然后解决如何显示问题,根据头像距离屏幕区域四边的距离,按照上 > 下,右 > 左 的权重顺序显示。
如果一个页面中有多个头像,是不是每个头像都要做一个信息框啊?就像qq空间那样。还有就是信息框中的内容应该如何动态获取呢?

其实前端太好实现了,关键在于后台读取数据,用户数亿级别,如何快速获取用户相关信息才是关键。