ajax实现鼠标悬停提示,基于jquery实现的鼠标悬停提示案例

//这是JS里的代码MOMO.js

因为刚学封装JQUERY插件 所以就做的稍微麻烦一点，其实在前台页面直接就可以用mouseover,mouseout,mousemove三个事件就行了

(function ($) {

$.fn.extend({

"titleOver": function (e) {

this[0].myTitle = this[0].title;

this[0].title = "";

//创建div元素

var tooltip = "

" + this[0].myTitle + "

"

$("body").append(tooltip);

$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show('fast');

}, "titleOut": function () {

this[0].title = this[0].myTitle;

$("#tooltip").remove();

}, "titleMove": function (e) {

$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });

}

});

//默认鼠标坐标

var x = 10;

var y = 20;

})(window.jQuery);

前台的页面:

JqueryDemo

$(function () {

$("a").mouseover(function (e) {

$(this).titleOver(e);

}).mouseout(function () {

$(this).titleOut();

}).mousemove(function (e) {

$(this).titleMove(e);

});

});

这是一个链接^_^！

运行效果:

当然还可以把DIV的内容换成图片，就形成了图片的悬浮效果

努力学习.....

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！