利用jQuary实现文字浮动提示效果示例代码

162 阅读 0 评论 107 点赞

我是靠谱客的博主阔达微笑，最近开发中收集的这篇文章主要介绍利用jQuary实现文字浮动提示效果示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<html> 
<head> 
<meta charset="utf-8"/> 
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> 
<script> 
/*文字提示*/ 
/* 
（1）鼠标移入的时候，创建一个div它的内容是title属性的值 
（2）规定位置，设置css样式 
（3）鼠标移出的时候，移除div 
（4）鼠标移动的时候，X Y轴的坐标要相应的变化 
*/ 
$(function(){ 
var x = 7; 
var y = 8; 
$("a.tip").hover(function(){ 
var title = this.title; 
var $div = $("<div id='newTip'>"+title+"</div>"); 
$("body").append($div); 
$div.css({"position":"absolute","background":"pink"}); 
},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> 