微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

rush:js;"> (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);

前台页面:

rush:xhtml;"> JqueryDemo 一个链接">这是一个链接^_^!

运行效果:

当然还

可以把DIV的内容换成图片,就形成了图片的悬浮效果

努力学习.....

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

原文地址:https://www.jb51.cc/jquery/43679.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐