基于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现实多行信息
Aug 26 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 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
解析argc argv在php中的应用
2013/06/24 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
jQuery中on()方法用法实例
2015/01/19 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
python版本五子棋的实现代码
2018/12/11 Python
Python实现爬取并分析电商评论
2020/06/19 Python
如何用python写个模板引擎
2021/01/14 Python
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
自主招生自荐信
2013/12/08 职场文书
会计工作心得体会
2014/01/13 职场文书
关于安全的标语
2014/06/10 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
欢迎新生标语
2014/10/06 职场文书
副总经理岗位职责
2015/02/02 职场文书
水电工岗位职责
2015/02/14 职场文书
运动会通讯稿200字
2015/07/20 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python