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插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
使用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 图像处理类1
2009/06/15 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
python3使用matplotlib绘制散点图
2019/03/19 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
生产部管理制度
2014/01/31 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
面试感谢信范文
2015/01/22 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL