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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 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数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
layui实现三级联动效果
2019/07/26 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python中关于for循环的碎碎念
2017/06/30 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python 字符串换行的多种方式
2018/09/06 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Django中的cookie和session
2019/08/27 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python 实现一个计时器
2020/07/28 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
实习护理工作自我评价
2013/09/25 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
接受捐赠答谢词
2014/01/27 职场文书
2014政务公开实施方案
2014/02/19 职场文书
银行服务明星推荐材料
2014/05/29 职场文书