Maus-Hover-Eingabeaufforderungsfall basierend auf Jquery-js-Tutorial-php.cn

Maus-Hover-Eingabeaufforderungsfall basierend auf Jquery

高洛峰

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

Original

1246 Leute haben es durchsucht

//Dies ist der Code in JS MOMO.js

Da ich gerade gelernt habe, das JQUERY-Plug-In zu kapseln, ist es tatsächlich etwas schwieriger, Mouseover, Mouseout usw. zu verwenden Mousemove-Events direkt auf der Startseite.

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

Nach dem Login kopieren

Startseite:

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

Nach dem Login kopieren

Laufeffekt:

Maus-Hover-Eingabeaufforderungsfall basierend auf Jquery

Natürlich können Sie den Inhalt des DIV auch in ein Bild umwandeln und so einen schwebenden Effekt des Bildes erzeugen

Lernen Sie intensiv...

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten Vorteile bringen kann. Ich hoffe auch, dass ich die chinesische PHP-Website unterstützen kann!

Weitere Artikel zu Fällen von Maus-Hover-Eingabeaufforderungen basierend auf JQuery finden Sie auf der chinesischen PHP-Website!