JavaScript-例如新浪微博,和鼠标移到头像上弹出tips名片的功能是怎么实现的?

项目合作 项目合作 主题:1030 回复:2135

JavaScript-例如新浪微博,和鼠标移到头像上弹出tips名片的功能是怎么实现的?

甜柠檬 发布于 2017-03-13 字数 469 浏览 1061 回复 1

tips

类似这种效果,我看很多网站都是自己把这个弹出层写在html里面,然后应该就是鼠标指向的时候就用ajax请求需要的数据,让后定位到需要的地方,这我就有点不明白了,到底是怎么设置定位的地方的呢?我自己写了个是把弹出层写在js代码里面,然后prepend到当前指向的地方这就不存在定位的问题,可这种当用在头像的话没问题,但同时用在头像和名字的时候会出css问题。所以我还是想知道微博是怎么定位这个tips的

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

瑾兮 2017-10-16 1 楼

我说下简单的实现方法:

比如这个浮动框的 宽、高分别为 350,150

鼠标移动到头像这个元素上,获得该元素的offset top 以及offset left

top = $(this).offset().top;
left = $(this).offset().left;

top - 150 < 0 浮动框应该出现在当前元素的下方(上边放不下)
left - 350 < 0 浮动框应该出现当前元素的右方 (左边放不下)

具体判断位置如下:

//右上方
if(top - 150 > 0 && left - 350 < 0) {
浮动框的top = top + 150
浮动框的left = left
}
//右下方
else if(top - 150 < 0 && left - 350 < 0) {

浮动框的top = top + 当前元素的高
浮动框的left = left

}
//左上方
else if(top - 150 > 0 && left - 350 > 0) {

浮动框的top = top - 150
浮动框的left = left - 350 + 当前元素的宽
}
//左下方
else {

浮动框的top = top + 当前元素的高
浮动框的left = left - 350 + 当前元素的宽
}

我这里没有把间距考虑在内,根据自己实际情况加上间距判断,在判断内给浮动框加上不同的样式就行了。还有就是通过调整判断的顺序,来决定优先选择限制的位置。