效果体验：http://hovertree.com/texiao/jsstudy/2/

实现思路

　　1 鼠标移入标题（这里是<a>标签）

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

　　　　将创建好的div加到文档中

　　　　为提示层设置位置

　　2 鼠标移出标题

　　　　移除div

　　3 当鼠标在标题内移动时

　　　　同样添加div效果

上面是跟随光标的，这个是居中的：
http://hovertree.com/texiao/jsstudy/2/1.htm

跟随光标完整代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>jQuery弹出光标跟随提示框- 何问起</title><base target="_blank" />

 <style type="text/css">

 #tooltip {

 position: absolute;

 border: #333 1PX solid;

 background: #f7f5d1;

 padding: 1px;

 color: #333;

 display: none;

 padding: 1px;

 }a{color:blue}

 #hovertree,#yestop,#hoverclock{width:789px;margin:20px auto}

 </style>

 <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

 </head>

 <body>

 <div id="hovertree"><a href="http://hovertree.com" class="tooltip" title="何问起首页">何问起首页</a> <a href="http://hovertree.com/texiao/" class="tooltip" title="网页特效库">特效</a></div>

 <div id="yestop"><a href="http://hovertree.com/h/bjaf/tishikuang.htm" class="tooltip" title="本效果代码">原文</a>

 <a href="http://hovertree.com/texiao/jsstudy/2/" class="tooltip" title="本效果网址">效果</a>

 <br /><br /><a href="#" class="tooltip" title="弹出层">test</a>

 </div>

 <div id="hoverclock">请把光标在各个链接上面移动，将会弹出跟随光标的提示框。

 <br /></div>

 <script>

 $(function () {

 var x = 15;

 var y = 10;

 $("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时

 this.myTitle = this.title;

 this.title = "";

 var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";

 $("body").append(tooltip);

 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");

 }).mouseout(function () { //当鼠标指针从元素上移开时

 this.title = this.myTitle;

 $("#tooltip").remove();

 }).mousemove(function (e) { //当鼠标指针从元素上移动时

 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });

 });

 });

 </script>

 </body>

 </html>

居中的实现请看：http://hovertree.com/h/bjaf/tishikuang.htm

更多特效： http://www.cnblogs.com/jihua/p/webfront.html

JQuery实现一个简单的鼠标跟随提示效果的更多相关文章

  1. 代码录播：jQueryMobile 实现一个简单的弹出框效果

    今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com  

  2. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 超简单的js实现提示效果弹出以及延迟隐藏的功能

     自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...

  4. 简单jquery 鼠标悬停提示效果

    记得自己引入jq插件哦~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. jquery 实现一个简单的成功提示框，失败提示框

    主要的jquery代码:var TS={ successAlert:function(str){ //调用成功的方法 var html='<div class="alert alert ...

  6. jQuery写一个简单的弹幕墙

    概述 近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣.自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来. 详细 代码下载:http://www.demoda ...

  7. 基于jQuery的一个简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

  8. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  9. JQuery中一个简单的表单验证的实例

    html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. Java Web应用的开发环境配置

    1:第一是下载好Eclipse开发工具,这里不做叙述,自行下载安装. 2:使用Eclipse开发WEB项目,启动Eclipse,选择File--->new --->other---> ...

  2. SQL Server中In-Flight日志究竟是多少

        在SQL Server中,利用日志的WAL来保证关系数据库的持久性,但由于硬盘的特性,不可能使得每生成一条日志,就直接向磁盘写一次,因此日志会被缓存起来,到一定数据量才会写入磁盘.这部分已经生 ...

  3. Easyui 让Window弹出居中与最大化后居中

    easyui1.3.2版本,window的弹出不会居中了.而dialog是会居中的,我们必须为为window的open事件做扩展 代码如下:只要加入以下代码即可.如果你是看了MVC项目系列的,把他放到 ...

  4. HTTP的RST包与WinHttp延迟关闭TCP连接

    一.RST包也常见于断开TCP连接  几个月前用wireshark抓HTTP包发现有的网络通信在结束的时候没有使用四次握手,而是直接使用RST包.如: 在TCP协议中RST表示复位,用来异常的关闭连接 ...

  5. Git版本控制Windows版快速上手

    说到版本控制,之前用过VSS,SVN,Git接触不久,感觉用着还行.写篇博文给大家分享一下使用Git的小经验,让大家对Git快速上手. 说白了Git就是一个控制版本的工具,其实没想象中的那么复杂,咱在 ...

  6. ASP.NET 5 使用 TestServer 进行单元测试

    之前如果对 ASP.NET WebAPI 进行单元测试(HttpClient 发起请求,并且可调试 WebAPI),一般采用 Owin 的方式,具体参考:<开发笔记:用 Owin Host 实现 ...

  7. 趣谈unicode，ansi，utf-8，unicode big endian这些编码有什么区别（转载）

    从头讲讲编码的故事.那么就让我们找个草堆坐下,先抽口烟,看看夜晚天空上的银河,然后想一想要从哪里开始讲起.嗯,也许这样开始比较好…… 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同 ...

  8. Oracle手边常用命令及操作语句

    Oracle手边常用命令及操作语句 作者:白宁超 时间:2016年3月4日11:24:08 摘要:日常使用oracle数据库过程中,常用脚本命令莫不是用户和密码.表空间.多表联合.执行语句等常规操作. ...

  9. SQL Tuning 基础概述09 - SQL Access Advisor

    Oracle官方文档对SQL Access Advisor的描述如下: SQL Access Advisor, which is a tuning tool that provides advice ...

  10. svn 几个常用命令（持续更新）

    1:获取某个版本号(3583)下的代码                                               svn co http://tech.yoai.com:8300/c ...