search

Home  >  Article  >  Web Front-end  >  Mouse hover prompt case based on jquery

Mouse hover prompt case based on jquery

高洛峰
高洛峰Original
2016-12-28 10:03:011214browse

//This is the code in JS MOMO.js

Because I just learned to encapsulate the JQUERY plug-in, it is a little more troublesome. In fact, you can use mouseover, mouseout, and mousemove events directly on the front page. That’s it

(function ($) {
 $.fn.extend({
 "titleOver": function (e) {
  this[0].myTitle = this[0].title;
  this[0].title = "";
  //创建div元素
  var tooltip = "<div id=&#39;tooltip&#39; style=&#39;border:1px solid #000000;width:auto;position:absolute;&#39;>" + this[0].myTitle + "</div>"
  $("body").append(tooltip);
  $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show(&#39;fast&#39;);
 }, "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);

Front page:

<!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>

Running effect:

Mouse hover prompt case based on jquery

Of course, you can also change the content of the DIV into pictures, just Forming the floating effect of the picture

Study hard...

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. At the same time I also hope to support the PHP Chinese website!

For more articles related to mouse hover prompt cases based on jquery, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Simple implementation of jquery focus mapNext article：Simple implementation of jquery focus map

Related articles

See more