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实现一个页面多个css样式实现
May 29 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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
提问的智慧(2)
2006/10/09 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
VUE重点问题总结
2018/03/19 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
基于python3的socket聊天编程
2020/02/17 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
简历自荐信范文
2015/03/09 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python