基于JQuery的一个简单的鼠标跟随提示效果


Posted in Javascript onSeptember 23, 2010

1.效果如图

基于JQuery的一个简单的鼠标跟随提示效果

2.实现思路

1 鼠标移入标题(这里是<a>标签)

创建一个div,div的内容为鼠标位置的文本

将创建好的div加到文档中

为提示层设置位置

2 鼠标移出标题

移除div

3 当鼠标在标题内移动时

同样添加div效果

3.JQuery实现代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
<style type="text/css"> 
body 
{ 
font-size:12px; 
} 
a 
{ 
text-decoration:none; 
} 
a:hover 
{ 
color:#CC0000; 
} 
#main 
{ 
margin:100px auto; 
width:350px; 
height:150px; 
border:solid #aaa 1px; 
} 
.tr_color{ 
background-color:#aaa; 
} 
</style> 
<script src="../JQuery/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
$("tr:even").addClass("tr_color"); 
$("#tb a").mouseover(function(e){ 
var toolTip = "<div id='tooltip' width='100px' height='12px' style='position:absolute;border:solid #aaa 1px;background-color:#F9F9F9'>" + $(this).html() + "</div>"; 
$("body").append(toolTip); 
$("#tooltip").css({ 
"top" :e.pageY + "px", 
"left" :e.pageX + "px" 
}); 
$("#tb a").mouseout(function(){ 
$("#tooltip").remove(); 
}); 
$("#tb a").mousemove(function(e){ 
$("#tooltip").css({ 
"top" :(e.pageY+5) + "px", 
"left" :(e.pageX+2) + "px" 
}); 
}); 
//alert("Y:" + e.pageY + "X:" + e.pageX); 
}); 
}); 
</script> 
<body> 
<div id="main"> 
<h5>JQuery--鼠标跟随提示</h5> 
<table id="tb" width="100%"> 
<tr> 
<td><a href="#">中秋快乐11</a></td> 
<td><a href="#">中秋快乐12</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐21</a></td> 
<td><a href="#">中秋快乐22</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐31</a></td> 
<td><a href="#">中秋快乐32</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐41</a></td> 
<td><a href="#">中秋快乐42</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐51</a></td> 
<td><a href="#">中秋快乐52</a></td> 
</tr> 
<tr> 
<td><a href="#">中秋快乐61</a></td> 
<td><a href="#">中秋快乐62</a></td> 
</tr> 
</table> 
</div> 
</body> 
</html>

代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.
Javascript 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 #Javascript
通过DOM脚本去设置样式信息
Sep 19 #Javascript
javscript对象原型的一些看法
Sep 19 #Javascript
Ext 今日学习总结
Sep 19 #Javascript
JS面向对象编程 for Cookie
Sep 19 #Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 #Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 #Javascript
You might like
php实现下载限制速度示例分享
2014/02/13 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
python中的多重继承实例讲解
2014/09/28 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
使用Python函数进行模块化的实现
2019/11/15 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
石油大学毕业生自荐信
2014/01/28 职场文书
工作迟到检讨书
2014/02/21 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
安全生产专项整治方案
2014/05/06 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers