基于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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
Vue中的字符串模板的使用
May 17 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
smarty自定义函数用法示例
2016/05/20 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
Python的另外几种语言实现
2015/01/29 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
理财学专业自荐书
2014/06/28 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
销售员自我评价
2015/03/11 职场文书
被告代理词范文
2015/05/25 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python