基于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
Jun 19 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
javascript date格式化示例
Sep 25 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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
xajax写的留言本
2006/11/25 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
javascript new一个对象的实质
2010/01/07 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python代码能做成软件吗
2020/07/24 Python
Python学习笔记之装饰器
2020/08/06 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
《自选商场》教学反思
2014/02/14 职场文书
法制宣传日活动总结
2014/04/29 职场文书
环保倡议书范文
2014/05/12 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书