效果体验：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. 设计与开发一款简单易用的Web报表工具（支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  2. MVC5 网站开发实践 1、建立项目

    目录 MVC5 网站开发实践 概述   一.建立项目 1.建立团队项目 在办公室和家里使用不同的电脑,为了方便代码的共享将项目建立为团队项目.   如图打开vs2013→新建→团队项目(图1),会自动 ...

  3. jQuery.unique引发一个血案

    项目开发过程中,PM说系统只要在一个特定的浏览器中运行就好,但是在其他的浏览器中不能出现逻辑的错误,所以在开发过程中,前端和后台选择是Chrome浏览器,没有仔细测试Firefox和IE.但是昨天PM ...

  4. 如何使用Xmanager及VNC登录远程桌面

    如何调用远程桌面,比较常见的有两种方式:Xmanager及VNC 正好今天鼓捣了一下,特整理如下: Xmanager Xmanager的调用也有两种方式: 一.直接在Xshell中调用 这时需设置会话 ...

  5. IDDD 实现领域驱动设计－一个简单的 CQRS 示例

    上一篇:<IDDD 实现领域驱动设计-CQRS(命令查询职责分离)和 EDA(事件驱动架构)> 学习架构知识,需要有一些功底和经验,要不然你会和我一样吃力,CQRS.EDA.ES.Saga ...

  6. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

  7. 1Z0-053 争议题目解析707

    1Z0-053 争议题目解析707 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 707.Because of a logical corruption in the EMPLOY ...

  8. jQuery-1.9.1源码分析系列（六） 延时对象

    首先我们需要明白延时对象有什么用? 第一个作用,解决时序以及动态添加执行函数的问题. function a(){alert(1)}; function b(){alert(2)}; function ...

  9. linux源码分析（二）－启动过程

    前置:这里使用的linux版本是4.8,x86体系. 这篇是 http://home.ustc.edu.cn/~boj/courses/linux_kernel/1_boot.html 的学习笔记. ...

  10. AngularJS中的方法参数的问题

    在使用AngularJS开发的过程中出现了如下的问题,一次贴记录下. 感觉也不能说是AngularJS的语法,应该说是JS里面的处理流程应该就是这样子,我现在想通过前端页面传递值到后端(通过方法传递) ...