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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php合并js请求的例子
2013/11/01 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
九年级体育教学反思
2014/01/23 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
爱我中华教学反思
2014/04/28 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS