效果体验：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. c#设计模式-组合模式

    在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...

  2. Uiautomator 2.0之Configrator类学习小记

    1. Configration类介绍 1.1. Configrator用于设置脚本动作的默认延时 1.2  Configrator功能: 1.2.1 可调节两个模拟动作之间的默认间隔 1.2.2 可调 ...

  3. python django基础（一）

    Django简介:Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的框架模式,即模型M,视图V和控制器C.不过在Django实际使用中,Django更关注的是模型(Mod ...

  4. LINQ系列：LINQ to XML类

    LINQ to XML由System.Xml.Linq namespace实现,该namespace包含处理XML时用到的所有类.在使用LINQ to XML时需要添加System.Xml.Linq. ...

  5. bootstrap-modal 学习笔记 源码分析

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...

  6. 快速搭建php环境

    WAMP:在windows系统下搭建PHP开发环境 APPSERVER: 两种可用于开发环境的,一般用WAMP LAMP构架 Linux系统 Apache服务器管理软件 Mysql数据库 php语言 ...

  7. Cinder 组件详解 - 每天5分钟玩转 OpenStack（47）

    本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户,所有 cinder 的请求都首先由 nova-api 处理.cinder ...

  8. 优化javaScript代码，提高执行效率

    今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...

  9. [c++] Smart Pointers

    内存管理方面的知识 基础实例: #include <iostream> #include <stack> #include <memory> using names ...

  10. Oracle管理磁盘空间和资源

    1.可恢复的空间分配 2.可移动表空间 3.Oracle段收缩功能 4.Oracle数据库资源管理 Reference 1.可恢复的空间分配 1.1 了解可恢复的空间分配 一般情况,我们发出一个大型数 ...