(1).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。
(2).x = 5和y = 15,用来规定弹出的层距离鼠标指针的距离。
(3).$("p").hover(function (e) {}, function () {}),为p元素注册事件处理函数,也就是规定鼠标悬浮和鼠标离开要执行的函数。
(4). otitle = this.title,获取当前鼠标悬浮的p元素的title属性值,并赋值给变量otitle。
(5).this.title = "",这个代码和上一段代码的目的是为了防止默认的title弹出层的出现,我们要显示的是自定义的。
(6).var ndiv = "<div id='leo'>" + otitle + "</div>",这是弹出的自定义信息层。
(7).$("body").append(ndiv),追加到body中。
(8).$("#leo").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show(2000),设置弹出层的坐标,并且显示出来。
(9). $(this).mousemove(function (e) {
$("#leo").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show(1000);
}),为当前元素注册mousemove事件处理函数。
也就是实现了当鼠标移动的时候,弹出层能够跟随移动。
(10).function () {
this.title = otitle;
$("#leo").remove();
}),规定当鼠标离开时候,将元素的title属性复原,并且移除弹出层。