Jquery实现鼠标移上弹出提示框、移出消失思路及代码


Posted in Javascript onMay 19, 2013

思路

1.首先要定位实现这种效果的元素 ,本次通过class

2.如果是动态显示不同的提示内容,需设置title

3.通过JQ给定位到元素加上 mouseover 和mouseout 事件

4.再完善下,弹出框跟随鼠标在目标元素上移动

5.再把 mouseover 、mouseout 合并成 hover

//页面加载完成 
$(function () { 
    var x = 10; 
    var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标 
    $(".prompt").hover(function (e) {  //鼠标移上事件 
        this.myTitle = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示 
        this.title = ""; 
        var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建提示框 
        $("body").append(tooltipHtml); //添加到页面中 
        $("#tooltip").css({ 
            "top": (e.pageY + y) + "px", 
            "left": (e.pageX + x) + "px" 
        }).show("fast"); //设置提示框的坐标,并显示 
    }, function () {  //鼠标移出事件 
        this.title = this.myTitle;  //重新设置title 
        $("#tooltip").remove();  //移除弹出框 
    }).mousemove(function (e) {   //跟随鼠标移动事件 
        $("#toolti").css({ "top": (e.pageY + y) + "px", 
            "left": (e.pageX + x) + "px" 
        }); 
    }); 
});
Javascript 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 #Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 #Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 #Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 #Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 #Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 #Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
对javascript和select部件的结合运用
2006/10/09 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python Zmail模块简介与使用示例
2020/12/19 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
作弊检讨书
2015/01/27 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
退休欢送会致辞
2015/07/31 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers