基于JQuery的一个简单的鼠标跟随提示效果_jquery

1.效果如图

　　

2.实现思路

　　1 鼠标移入标题（这里是标签）

　　　　创建一个div，div的内容为鼠标位置的文本

　　　　将创建好的div加到文档中

　　　　为提示层设置位置

　　2 鼠标移出标题

　　　　移除div

　　3 当鼠标在标题内移动时

　　　　同样添加div效果

3.JQuery实现代码

复制代码 代码如下:

";
$("body").append(toolTip);
$("#tooltip").css({
"top" :e.pageY + "px",
"left" :e.pageX + "px"
});
$("#tb a").mouseout(function(){
$("#tooltip").remove();
});
$("#tb a").mousemove(function(e){
$("#tooltip").css({
"top" :(e.pageY+5) + "px",
"left" :(e.pageX+2) + "px"
});
});
//alert("Y:" + e.pageY + "X:" + e.pageX);
});
});

JQuery--鼠标跟随提示

中秋快乐11	中秋快乐12
中秋快乐21	中秋快乐22
中秋快乐31	中秋快乐32
中秋快乐41	中秋快乐42
中秋快乐51	中秋快乐52
中秋快乐61	中秋快乐62

代码很简单主要是用到了JQuery的三个事件mouseover,mouseout,mousemove.