基于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 相关文章推荐
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
用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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php四种基础算法代码实例
2013/10/29 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
常用的javascript function代码
2008/05/23 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python 登录网站详解及实例
2017/04/11 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python计算日期之间的放假日期
2018/06/05 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
django中media媒体路径设置的步骤
2019/11/15 Python
python属于解释语言吗
2020/06/11 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
python 基于opencv操作摄像头
2020/12/24 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
会计助理岗位职责
2014/02/17 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
会计学专业自荐信
2014/06/25 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书