jQuery探测位置的提示弹窗(toolTip box)详细解析


Posted in Javascript onNovember 14, 2013

这里我用jQuery做了个提示弹窗的js,并做了个小demo,简单总结下:

方位

根据当前鼠标所处的位置不同,箭头所指向的方向也不同:

左上方(left-top)(缺省)、左下方(left-bottom)、右上方(right-top)、右下方(right-bottom)、上左方(top-left)、上右方(top-right)、下左方(bottom-left)、下右方(bottom-right)

优先级

以上各种情况优先级依次降低

探测思路

探测基本思路是:

首先,也是前提条件,判断容器的高或宽是否是弹窗对应的高或宽的两倍,之所以是两倍,因为临界点是目标容器的各个边的中点

/*
* 先判断目标容器的高度或者宽度是否是容器对应高度或宽度与箭头尺寸之和的两倍,否则,报错。之所以是2倍,因为临界点是目标容器的各个边的中点。
*/

接下来,可以依据优先级去逐个判断:

/*
* 思路是,先检测左侧,再检测右侧,左右都放不下,则检测顶部,都排除,再考虑底部。检测左右侧时,先考虑顶部能否放下;检测上下时,先考虑据左右侧那边的距离大。

* 1.检测左侧时,判断上下距离能否放下箭头偏移量,有一个不能放下(例如top),则为['top', 'left'],右侧一样

* 2.检测上下时,判断左右距离能否放下箭头偏移量(缺省为上,即top),有一侧不能放下,即为鼠标偏向的一侧(若left<right,则left),则为['top', 'left'],此时箭头偏移量为0,随鼠标移动,鼠标left增大,则增大,最大至偏移量。

* 缺省是左侧,顶部。
*/

具体情况判断:

•根据优先级,先判断鼠标右侧能否放下弹窗:

◦能放下,则去判断能否再放进个箭头

■若能放下

■则判断顶部是否能放下个箭头,包括箭头的偏移量,若能

■判断顶部能放下箭头包括偏移量并且不会超过目标容器高度,则为left-top

■否则如果顶部大于弹窗高度,并底部可放下箭头包括其偏移量,则为left-bottom

■否则,判断底部能放下箭头和弹窗,则为top-left

■否则,基于我们的前提条件,是bottom-left

■若不能放下,判断底部能不能放下弹窗和箭头

■能,则为top-left

■否则,为bottom-left

◦不能放下,则left考虑完,换right,同样的思路

八种情况弹窗的情况和位置

举例top-left

 case 'top-left' :
    // top 加上 箭头尺寸
    this.conObj.css('top', top + tarTop);
    // 判断left距离
    if ( left < arrOffset ) {
        // 紧贴左边
        this.conObj.css('left', tarLeft);
    } else if (right < (conWidth - arrOffset)) {             // 如果right,撑不下自身在右边的距离(conWidth - arrOffset),则left值减小,箭头跟随鼠标,使自己右边与容器对齐
        // 正常显示的left, 减去右侧还需要的宽度((conWidth - arrOffset) - right ), left - arrOffset - ((conWidth - arrOffset) - right ),得出tarWidth - conWidth
        // 换种思路,紧贴右边,即左边距离为,目标容器宽度减去自身宽度
        this.conObj.css('left', tarWidth - conWidth + tarLeft);
    } else {                // 正常显示的left
        this.conObj.css('left', left - arrOffset + tarLeft);
    }
    break;

八种情况下箭头的情况和位置

同样以top-left为例

 case 'top-left' :
    this.arrowObj.prependTo(this.conObj);
    // 如果con紧贴右边,此时,箭头随鼠标移动
    if (conLeft === 0 && (conWidth > (right + arrOffset))) {
        this.arrowObj.css('left', conWidth - right - arrowPos);
    } else {
        this.arrowObj.css('left', arrowPos);
    }
    break;

最后说下在写代码时候的些许感悟:

写的代码,在重构了N遍,写完N行注释后,忽然想到,其实不论是写代码,还是生活,我们都是有个既定的或者约定俗成的前提或者说规范的。而一旦这个规范被打破,往往前功尽弃,即使不是,往往也很受伤。实例小至代码、大至社会,无一例外

Javascript 相关文章推荐
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 #Javascript
浅析用prototype定义自己的方法
Nov 14 #Javascript
Js nodeType 属性全面解析
Nov 14 #Javascript
open 动态修改img的onclick事件示例代码
Nov 13 #Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 #Javascript
js获取IFRAME当前的URL的方法
Nov 13 #Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 #Javascript
You might like
Php中使用Select 查询语句的实例
2014/02/19 PHP
php组合排序简单实现方法
2016/10/15 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python 类的继承实例详解
2017/03/25 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
法语专业求职信
2014/07/20 职场文书
忠诚教育心得体会
2014/09/03 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python