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

实现思路

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

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

　　　　将创建好的div加到文档中

　　　　为提示层设置位置

　　2 鼠标移出标题

　　　　移除div

　　3 当鼠标在标题内移动时

　　　　同样添加div效果

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

跟随光标完整代码如下：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>jQuery弹出光标跟随提示框- 何问起</title><base target="_blank" />
  6.  <style type="text/css">
  7.  #tooltip {
  8.  position: absolute;
  9.  border: #333 1PX solid;
  10.  background: #f7f5d1;
  11.  padding: 1px;
  12.  color: #333;
  13.  display: none;
  14.  padding: 1px;
  15.  }a{color:blue}
  16.  #hovertree,#yestop,#hoverclock{width:789px;margin:20px auto}
  17.  </style>
  18.  <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
  19.  </head>
  20.  <body>
  21.  <div id="hovertree"><a href="http://hovertree.com" class="tooltip" title="何问起首页">何问起首页</a> <a href="http://hovertree.com/texiao/" class="tooltip" title="网页特效库">特效</a></div>
  22.  <div id="yestop"><a href="http://hovertree.com/h/bjaf/tishikuang.htm" class="tooltip" title="本效果代码">原文</a>
  23.  <a href="http://hovertree.com/texiao/jsstudy/2/" class="tooltip" title="本效果网址">效果</a>
  24.  <br /><br /><a href="#" class="tooltip" title="弹出层">test</a>
  25.  </div>
  26.  
  27.  <div id="hoverclock">请把光标在各个链接上面移动，将会弹出跟随光标的提示框。
  28.  
  29.  <br /></div>
  30.  <script>
  31.  $(function () {
  32.  var x = 15;
  33.  var y = 10;
  34.  $("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时
  35.  this.myTitle = this.title;
  36.  this.title = "";
  37.  var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
  38.  $("body").append(tooltip);
  39.  $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
  40.  }).mouseout(function () { //当鼠标指针从元素上移开时
  41.  this.title = this.myTitle;
  42.  $("#tooltip").remove();
  43.  }).mousemove(function (e) { //当鼠标指针从元素上移动时
  44.  $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
  45.  });
  46.  });
  47.  </script>
  48.  </body>
  49.  </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. JVM字节码指令

    invokevirtual 调用实例方法 invokespecial 调用父类构造,实例初始化方法,私有方法 dup 复制栈顶数值,并且复制值进栈,pop/pop2为栈顶值出栈 aload_0 加载第 ...

  2. 监控Linux系统性能的工具--nmon(一)

    今天看到一资料上写着,nmon可以对linux系统进行性能监控,随手在自己的阿里云上敲了一下这个命令,提示'command not find' 一脸懵~,然后探索了一下如何安装这个工具以及如何更好的查 ...

  3. Android开发-之数据的存储方式一

    在Android中,数据的存储分为两种方式: 1.直接以文件的形式存储在目录中 2.以json格式存储在数据库中 将数据以文件的存储又分为两种方式: 1.生成.txt文件 2.生成xml文件 那么今天 ...

  4. sizzle分析记录：关于querySelectorAll兼容问题

    querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.O ...

  5. ASP.NET MVC5 网站开发实践 - 概述

    前段时间一直在用MVC4写个网站开发的demo,由于刚开始学所有的代码都写在一个项目中,越写越混乱,到后来有些代码自己都理不清了.1月26日晚上在群里跟@怒放 他们讨论这个问题,结论是即使只是一个小d ...

  6. xUnit安装及注意事项

    前言 对于单元测试,想必大家都已再熟悉不过了,同时单元测试的重要性也越发突出,在招聘中也特别强调单元测试,但是对于微软内置的单元测试还是太过于繁琐,于是都在寻找一种简洁并且更加轻量的测试工具.用的最多 ...

  7. JavaSE高级之集合类

    ​下面的内容是对java中的集合类进行的总结,过段时间会分享java的网路编程,多线程等内容,欢迎批评指正. 1．Java中的集合是用来存放对象的,即集合是对象的集合,对象是集合的元素,java AP ...

  8. 一个简易的MysQL性能查询脚本

    如下: #!/bin/sh mysqladmin -P3306 -uroot -p ext |\ awk -F"|" \ "BEGIN{ count=0; }" ...

  9. MySQL的分页优化

    今天下午,帮同事重写了一个MySQL SQL语句,该SQL语句涉及两张表,其中一张表是字典表(需返回一个字段),另一张表是业务表(本身就有150个字段,需全部返回),当然,字段的个数是否合理在这里不予 ...

  10. Oracle函数之LISTAGG

    最近在学习的过程中,发现一个挺有意思的函数,它可实现对列值的拼接.下面我们来看看其具体用法. 用法: 对其作用,官方文档的解释如下: For a specified measure, LISTAGG  ...