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


Posted in Javascript onJune 10, 2015

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

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

HTML设计如下:

<p><a href="https://3water.com/" 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程序设计有所帮助。

Javascript 相关文章推荐
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue引入js数字小键盘的实现代码
May 14 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 #Javascript
jQuery替换textarea中换行的方法
Jun 10 #Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 #Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 #Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 #Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 #Javascript
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python 多维List创建的问题小结
2019/01/18 Python
python线程的几种创建方式详解
2019/08/29 Python
微博营销计划书
2014/01/10 职场文书
培训讲师岗位职责
2014/04/13 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
交通事故协议书范本
2014/11/18 职场文书
新郎新娘答谢词
2015/01/04 职场文书
发布会邀请函
2015/01/31 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书