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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
ajax与302响应代码测试
Oct 23 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
详解vue中组件参数
Jul 09 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 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
php下MYSQL limit的优化
2008/01/10 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
js中实例与对象的区别讲解
2019/01/21 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
工业设计专业推荐信
2013/10/29 职场文书
如何做好总经理助理
2013/11/12 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
会计助理岗位职责
2014/02/17 职场文书
《金子》教学反思
2014/04/13 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
python获取带有返回值的多线程
2022/05/02 Python