検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryに基づくマウスホバープロンプトのケース

jQueryに基づくマウスホバープロンプトのケース

高洛峰
高洛峰オリジナル
2016-12-28 10:03:011247ブラウズ

//これは JS MOMO.js のコードです

​​

JQUERY プラグインのカプセル化を学習したばかりなので、実際には、mouseover、mouseout、mousemove の 3 つのイベントを直接使用できます。フロントページ: 

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

フロントデスクページ: 

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

ランニングエフェクト:

jQueryに基づくマウスホバープロンプトのケース

もちろん、DIV のコンテンツを写真に置き換えて、写真のフローティングエフェクトを形成することもできます

しっかり勉強してください。 ..

以上がこの記事の全内容です、この記事の内容が皆様の勉強やお仕事に少しでもお役に立てれば幸いです、そしてPHP中国語サイトも応援させていただきます！

jquery に基づくマウスホバープロンプトのケースに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jqueryフォーカスマップの簡単な実装次の記事：jqueryフォーカスマップの簡単な実装

関連記事

続きを見る