Mouse hover prompt case based on jquery-JS Tutorial-php.cn

Mouse hover prompt case based on jquery

高洛峰

Release： 2016-12-28 10:03:01

Original

1227 people have browsed it

//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);

Copy after login

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>

Copy after login

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!