效果体验：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. IDE：IDEA Commit Changes Dialog local changes refresh

    IDEA提交代码,一直卡着不动,显示:Commit Changes Dialog local changes refresh 修改方法为: go to settings - version contr ...

  2. SSIS 数据类型和类型转换

    在进行ETL开发时,数据类型(Data Type)是最基础的,但也容易被忽略,楼主使用的SQL Server 版本是2012,用此博文记录,常用的SSIS数据类型和TSQL数据类型的映射.SSIS的数 ...

  3. Lookup component 用法

    Lookup component 类似于Tsql的join子句, select a.* ,b.* from dbo.tis a left join dbo. tdes b on a.code=b.co ...

  4. IIS7.5+WebConfig实现页面伪静态和301重定向

    IIS7.5+WebConfig实现页面伪静态和301重定向 使用URLRewriter组件在windows 2003 +iis 6.0下配置伪静态的文章网络上一大堆.但在iis7.0或iis 7.5 ...

  5. c数组与字符串

    原文链接:http://www.orlion.ga/913/ 一.数组 定义数组: int count[9]; 赋值: int count[4] = { 3, 2, }; 未赋初值的元素用0初始化.如 ...

  6. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

  7. ScrollView中嵌套GridView，ListView只显示一行的解决办法

    转载:http://blog.csdn.net/luohai859/article/details/39347583 关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView, ...

  8. 简单java在线测评程序

    简单java程序在线测评程序 一．前言 大家过年好!今年的第一篇博客啊!家里没有网,到处蹭无线!日子过得真纠结!因为毕设的需求,简单写了一个java程序在线测评程序,当然也可以在本地测试. 二．思路 ...

  9. POJ2513-Colored Sticks

    /*思路:类似图论中“一笔画”问题,两根木棒的相连接的端点是一样的颜色,(a,b)--(b,c)--(c, d)....方法:trie树+并查集, 利用trie树建立字符串和某一个节点的映射,并将这些 ...

  10. IOS开发之显示微博表情

    在上一篇博客中山寨了一下新浪微博,在之后的博客中会对上一篇代码进行优化和重用,上一篇的微博请求的文字中有一些表情没做处理,比如带有表情的文字是这样的“我要[大笑],[得意]”.显示的就是请求的字符串, ...