recherche

Maison  >  Article  >  interface Web  >  Cas d'invite de survol de la souris basé sur jquery

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

高洛峰
高洛峰original
2016-12-28 10:03:011209parcourir

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

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>

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 !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Implémentation simple de la carte de focus jqueryArticle suivant：Implémentation simple de la carte de focus jquery

Articles Liés

Voir plus