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 大数据相加的问题
Aug 03 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
JS中FormData类实现文件上传
Mar 27 Javascript
前端如何实现动画过渡效果
Feb 05 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
php7性能提升的原因详解
2019/10/13 PHP
jquery ajax例子返回值详解
2012/09/11 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
python爬取网站数据保存使用的方法
2013/11/20 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python遍历类中所有成员的方法
2015/03/18 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python字符串处理实例详解
2017/05/18 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python实现猜数字小游戏
2020/03/24 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
MYSQL基础面试题
2012/05/13 面试题
应届生求职推荐信
2013/10/28 职场文书
文科生自我鉴定
2014/02/15 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
教师听课学习心得体会
2016/01/15 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书