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星级插件、支持页面中多次使用
Mar 25 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Node调用Java的示例代码
Sep 20 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
php use和include区别总结
2019/10/13 PHP
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
js实现移动端轮播图
2020/12/21 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
浅谈Python的文件类型
2016/05/30 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
中国入世承诺
2014/04/01 职场文书
心理咨询承诺书
2014/05/20 职场文书
欢度春节标语
2014/07/01 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
个人简历求职信范文
2015/03/20 职场文书
爱心募捐通知范文
2015/04/27 职场文书
大学学生会辞职信
2015/05/13 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis