Cas d'invite de survol de la souris basé sur jquery-js tutoriel-php.cn

Cas d'invite de survol de la souris basé sur jquery

高洛峰

Libérer： 2016-12-28 10:03:01

original

1239 Les gens l'ont consulté

//C'est le code dans JS MOMO.js

Parce que je viens d'apprendre à encapsuler le plug-in JQUERY, c'est un peu plus gênant. En fait, vous pouvez utiliser le survol, le retrait de la souris et. événements mousemove directement sur la première page. Faites-le

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

Copier après la connexion

Première 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>

Copier après la connexion

Effet de course :

Cas dinvite de survol de la souris basé sur jquery

Bien sûr, vous pouvez également changer le contenu du DIV en image, formant un effet flottant de l'image

Étudiez dur...

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter des avantages aux études ou au travail de chacun. Pour obtenir de l'aide, j'espère également soutenir le site Web PHP chinois !

Pour plus d'articles liés aux cas d'invite de survol de la souris basés sur jquery, veuillez faire attention au site Web PHP chinois !