你的位置:首页 > Java教程

[Java教程]鼠标悬浮于链接之上出现文字说明效果


鼠标悬浮于链接之上出现文字说明效果:
对于超链接<a>标签,有一个title属性,当鼠标表悬浮于链接之上时候,就会显示title的属性值,虽然在一定程度上满足了我们的需要,但是美观度却似差强人意,同时无法修改它的样式,下面就来介绍一下如何利用jquery模拟实现此功能。
代码如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){  var x = 7;  var y = 8;  $("a.tip").hover(function(){   var title=this.title;   var $div=$("<div id='newTip'>"+title+"</div>");   $(this).append($div);     $(this).css({"position":"relative"});   $div.css({"position":"absolute","background":"pink"});     $div.css({"width":"120px","height":"30px"});  },function(){   $("#newTip").remove();  }).mousemove(function(e){   var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});  }); }) </script> </head> <body> <a href="#" class="tip" title="蚂蚁部落欢迎您">蚂蚁部落</a> </body> </html>

 

以上代码当鼠标悬浮于链接之上的时候,能够出现文字说明并且能够跟随鼠标移动,下面介绍一下它的实现过程。
一.代码注释:
1.$(function(){)),当稳当结构完全加载完毕再去执行函数中的代码。
2.var x = 7,var y = 8,声明两个变量用来定义鼠标指针和弹出的层的横向和纵向距离。
3.$("a.tip").hover(function(){ },function(){}),为指定的链接添加鼠标悬浮和鼠标离开时要执行的函数。
4.var title=this.title,将当前链接的title属性值赋值给变量title。
5.var $div=$("<div id='newTip'>"+title+"</div>"),创建一个jquery对象,其实就是div中放入title属性值,这个也就是要弹出的层。
6.$(this).append($div),将创建的div添加到当前链接<a>中。
7.$(this).css({"position":"relative"}),将超链接a设置为相对定位,因为弹出层是绝对定位,那么定位参考对象就可以是链接a了。
8. $div.css({"position":"absolute","background":"pink"}),将div的设置为绝对定位,背景颜色为粉色。
9.$div.css({"width":"120px","height":"30px"}),设置div的尺寸。
10.$("#newTip").remove(),删除指定id的元素,这里就是删除弹出的div。
11.mousemove(function(e){}),注册mousemove事件处理函数,当然这里采用的是链式调用。
12.var $div = $("#newTip").css({"left": (e.pageX+x)+'px',"top": (e.pageY+y)+'px'}),设置弹出div的left和top属性值,实现跟随效果。
二.相关阅读:
1.hover()可以参阅jQuery的hover事件一章节。 
2.this可以参阅javascript的this用法详解一章节。 
3.append()函数可以参阅jQuery的append()方法一章节。 
4.css()函数可以参阅jQuery的css()方法一章节。 
5.remove()函数jQuery的remove()方法一章节。
6.mousemove事件可以参阅jQuery的mousemove事件一章节。 
7.e.pageX可以参阅jQuery的event.pageX属性一章节。 
8.相对定位可以参阅CSS的相对定位一章节。
9.绝对定位可以参阅CSS的绝对定位一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11405

更多内容可以参阅:http://www.softwhy.com/jquery/