jQuery实现自定义链接提示-水寒冰居.专注于.NET

jQuery实现自定义链接提示

工作中用到的一个小功能，记录一下

说明：自定义链接提示，鼠标放到相应的地方，在鼠标旁显示相应的自定义提示框

简单的demo

<html>
<head>
<style type="text/css">
#tipbox{border:1px solid #999; background-color:#ccc;color:#f00; position:absolute; padding:0.5em; display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<body>

<a class="mousetip" alt="aaa">aaaaaaaaaaa</a>
<br/><br/><br/>
<a class="mousetip" alt="bbb">bbbbbbbbbbb</a>
<br/><br/><br/>
<a class="mousetip" alt="ccc">ccccccccccc</a>
<br/><br/><br/>
<a class="mousetip" alt="ddd">ddddddddddd</a>
<br/><br/><br/>
<a class="mousetip" alt="eee">eeeeeeeeeee</a>

$(document).ready(function(){

var offsetX = 10,offsetY=2;

//显示提示
$("a.mousetip").hover(
function(e){
$("#tipbox")
.html("提示文字：" + this.alt)
.css("top",(e.pageY - offsetY) + "px")
.css("left",(e.pageX + offsetX) + "px")
.fadeIn("fast");
},
function(){$("#tipbox").fadeOut("fast")}
);

//跟随鼠标
$("a.mousetip").mousemove(function(e){

$("#tipbox").css("top",(e.pageY - offsetY) + "px")
.css("left",(e.pageX + offsetX) + "px");
});

});
</script>
</body>
</html>

Tag标签: jQuery