JQuery实现超链接鼠标提示效果的方法

本文实例讲述了JQuery实现超链接鼠标提示效果的方法。分享给大家供大家参考。具体分析如下：

浏览器其实已经自带了超链接提示，只需在超链接中加入title属性就可以了。但是这个提示效果的响应速度是非常缓慢的，大概要延迟1秒左右啊。我们现在需要的是当鼠标移动到超链接的那一瞬间就出现提示。这时就需要移除a标签中的title提示效果，自己动手做一个类似功能的提示。

HTML设计如下：

代码如下:

<p><a href="http://www.jb51.net/" class="tooltip" title="欢迎访问我们">欢迎访问我们</a></p>

然后为class为tooltip的超链接添加mouseover和mouseout事件：

$("a.tooltip").mouseover(function (){
    //显示 title
}).mouseout(function (){
    //隐藏 title
});

实现这个效果的具体思路如下：

1. 当鼠标滑入超链接时， 创建一个div元素，div元素的内容为title属性的值。然后将创建的元素追加到文档中。为它设置x坐标和y坐标，使它显示在鼠标位置的旁边。
2. 当鼠标滑出超链接时，移除div元素。

根据分析的思路，写出如下JQuery代码：

$(function(){
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    this.title = "";
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //创建 div 元素
    $("body").append(tooltip); //把它追加到文档中
    $("#tooltip")
      .css({
        "top": (e.pageY + y) + "px",
        "left": (e.pageX + x) + "px"
      }).show("fast"); //设置x坐标和y坐标，并且显示
  }).mouseout(function(){
    this.title = this.myTitle;
    $("#tooltip").remove(); //移除
  });
});

此时的效果有两个问题：首先是当鼠标滑过后，a标签中的title属性的提示也会出现：其次是设置x坐标和y坐标的问题，由于自制的提示与鼠标的距离太近，有时候会引起无法提示的问题（鼠标焦点变化引起mouseout事件）。

为了移除a标签中的title提示功能，需要进行以下几个步骤：

1. 当鼠标滑入时，给对象添加一个新属性，并把title的值传给这个属性，然后清空属性title的值。

this.myTitle = this.title;
s.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//创建 div 元素

2. 当鼠标滑出时，再把对象的myTitle属性的值又赋给属性title。

代码如下:

this.title = this.myTitle;

为什么当鼠标滑出时，要把属性值又赋给属性title呢？因为当鼠标滑出时，需要考虑再次滑入时的属性title值，如果不将myTitle的值重新赋给title属性，当再次滑入时，title的值就为空了。

为了解决第2个问题，需要重新设置提示元素的top和left的值，代码如下所示，为top增加了10px，为left增加了20px：

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

OK，到这里问题都解决了，鼠标超链接提示效果实现。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery实现弹出窗口效果的实例代码

    JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html>  <head>    <title>jQuery实例1:浮动窗口</title>    <meta http-equiv="Content-Type" content="te

  • Jquery弹出窗口插件 LeanModal的使用方法

    Jquery弹出窗口插件 LeanModal的使用方法

    开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用. 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到.当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤: 1.引用Jquery.js和leanModal.min.js 复制代码 代码如下: <script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"&

  • jQuery实现弹出窗口中切换登录与注册表单

    jQuery实现弹出窗口中切换登录与注册表单

    当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置两个链接按钮,即登录和注册按钮. <nav class="main_nav"> <ul> <li><a class="cd-signin&

  • jQuery弹出窗口打开链接的实现代码

    下面给大家分享一段jquery代码实现弹出窗口打开链接的实现方法 window.open(url, name, style, replace); //弹出窗口打开链接,参数:网址,命名,窗体样式,是否替代原窗口 用处:打开新窗体,打开自定义页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在弹出窗口中打开新连接</title> </h

  • AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow 基于JQuery的弹出窗口插件

    可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了.如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的.兼容多种主流浏览器. 最基础的调用方法: 复制代码 代码如下: $('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用: 复制代码 代码如下: $('#YourContainerDiv').AeroWin

  • JQuery简单实现锚点链接的平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里. <a id="turnToContent" href="#content"></a> 然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章.最好将此d

  • jQuery+jqmodal弹出窗口实现代码分明

    jQuery+jqmodal弹出窗口实现代码分明

    先上图,最终效果如下 点击"信息确认" 就是弹出一个确认窗口,把已经填报的信息都放到里面看看. 信息放里面很简答,主要是弹出窗口要做得好看点. 所以选择了jQuery+jqmodal实现 实现方法如下1.页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的. 2.建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none.高度和宽度要设置好,挡住下

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti

  • JQuery实现超链接鼠标提示效果的方法

    本文实例讲述了JQuery实现超链接鼠标提示效果的方法.分享给大家供大家参考.具体分析如下: 浏览器其实已经自带了超链接提示,只需在超链接中加入title属性就可以了.但是这个提示效果的响应速度是非常缓慢的,大概要延迟1秒左右啊.我们现在需要的是当鼠标移动到超链接的那一瞬间就出现提示.这时就需要移除a标签中的title提示效果,自己动手做一个类似功能的提示. HTML设计如下: 复制代码 代码如下: <p><a href="http://www.jb51.net/"

  • 基于jquery的自定义鼠标提示效果 jquery.toolTip

    基于jquery的自定义鼠标提示效果 jquery.toolTip

    IE下效果 Firefox或其它浏览器效果 代码 复制代码 代码如下: //版权 酷车中国 www.kuchechina.com //作者 逐月 zhuyue.cnblogs.com //演示 http://www.kuchechina.com/carstools/Default.aspx jQuery.fn.toolTip = function() { this.unbind().hover( function(e) { this.t = this.title; this.title = ''

  • jQuery简单实现title提示效果示例

    本文实例讲述了jQuery简单实现title提示效果的方法.分享给大家供大家参考,具体如下: /* 调用示例: $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' class='quicktip' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = fu

  • jQuery文字提示与图片提示效果实现方法

    jQuery文字提示与图片提示效果实现方法

    本文实例讲述了jQuery文字提示与图片提示效果实现方法.分享给大家供大家参考,具体如下: 1.效果如图: 2.文字提示代码: <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = &q

  • 基于jQuery创建鼠标悬停效果的方法

    本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

  • jQuery实现行文字链接提示效果的方法

    本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • jQuery实现感应鼠标动画效果自动伸长的输入框实例

    本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • jquery实现简单文字提示效果

    本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l

  • WinForm实现自定义右下角提示效果的方法

    本文实例讲述了WinForm实现自定义右下角提示效果的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace IcoFl

随机推荐