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

2019-11-19 18:34:23

字体：大中小

来源：转载

供稿：网友

//这是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 = "<div id='tooltip' style='border:1px solid #000000;width:auto;position:absolute;'>" + this[0].myTitle + "</div>"  $("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);

前台的页面:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JqueryDemo</title> <script type="text/javascript" src="script/jquery-1.8.3.js"></script> <script type="text/javascript" src="script/MOMO.js"></script> <script type="text/javascript"> $(function () {  $("a").mouseover(function (e) {  $(this).titleOver(e);  }).mouseout(function () {  $(this).titleOut();  }).mousemove(function (e) {  $(this).titleMove(e);  }); }); </script></head><body> <a href="#" title="这是一个链接">这是一个链接^_^！</a></body></html>

运行效果: