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 相关文章推荐
jQuery中each()方法用法实例
Dec 27 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 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
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
烹饪大赛策划方案
2014/05/26 职场文书
担保书范文
2015/01/20 职场文书
Python爬取某拍短视频
2021/06/11 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS