jquery は、マウスが it_jquery 上をスライドしたときにプロンプトボックスを表示するメソッドを実装します。-jsチュートリアル-php.cn

この記事の例では、マウスが上をスライドしたときにプロンプトボックスを表示する jquery メソッドについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。

1. マウスを

上にスライドさせたときに表示される jquery プロンプトボックスの例

1. レンダリング

2. 実装コード (jquery.js、ボタン画像、プロンプトボックス画像を自分で追加する必要があります)

HTML コード

コードをコピーコードは次のとおりです:

<頭>

アニメーションメニューホバー 1

<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$(".menu li").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
}、関数() {
$(this).find("em").animate({不透明度: "非表示", トップ: "-85"}, "高速");
});
});

Web デザイナーウォール デザインのアイデア、ウェブトレンド、チュートリアルの壁

ベストウェブギャラリー
最高の CSS および Flash Web サイトを特集

N.Design Studio
WDW デザイナー Nick La のブログとデザインポートフォリオ

2. マウスを上にスライドさせたときに表示される jquery プロンプトボックスの例 2

マウスをユーザー名の上に移動すると、マウスの右下隅に div が表示され、ユーザー情報が表示されます

1. レンダリング

2.実装方法

大きな部分は 3 つだけです。1 つは div の配置で、これがエフェクトの主な困難です。2 つ目は、ajax によるデータの非同期読み込みです。3 つ目は、onmouseover と onmouseout の 2 つの js 属性を使用することです。つまり、マウスが通り過ぎてマウスから離れたときです。

3. 実装手順

(1) まず、ユーザー情報を表示する div のスタイルを設計します。ここで注意していただきたいのは、このメソッドは各ユーザー名の横に div をバインドするわけではなく、マウスが通過したときに表示されます。 Web ページには情報を表示する div が 1 つだけあり、これを行うには、div の配置方法を絶対配置に設定する必要があります。

HTMLコード:

コードをコピーコードは次のとおりです:

(2)、相应css代码

复制代码代码如下:

#blockdiv{

幅:380px;

高さ:160px;

float:left;

表示:なし;

境界線: 1px 実線 #ccc;  位置: 絶対; z インデックス: 1;不透明度: 0.1;背景：白

}

.pic{

幅:100px;

高さ:100px;

ボーダー:1px ソリッド #ccc;

境界半径:10px; 

フロート:左;マージン:10px; 

オーバーフロー:非表示;

}

.box{

幅:240px;

高さ:140px;

マージン:10px 0 10px 10px;

float:left;

オーバーフロー:非表示;テキスト オーバーフロー:省略記号;ホワイトスペース:nowrap;}

(3)、定位、精緻な定位と便利な調整のために、最初に現在のマウスの座標を保存するために 2 つの签を配置しました

复制代码代码如下:

その後js获取当前坐标并标签中保存：

复制代码代码如下:

jQuery(document).ready(function ($) {

$(document).mousemove(function (e) {

 document.getElementById("pagex").value = e.pageX;//pageX() プロパティは、文書の左端に対するネズミの指示针の位置です。
 document.getElementById("pagey").value = e.pageY;//pageY() プロパティは、文書の上端に対するネズミの位置です。

    });

});

(4)、ネズミ标经过和离开イベントjs代码

复制代码代码如下:

関数 ShowInfo(ユーザー名) {
$("#blockdiv").css({
"表示": "ブロック",
"左": document.getElementById('pagex').value,
"トップ": document.getElementById('pagey').value,
});
$("#messagediv").css("表示", "ブロック");
$.getJSON("../ashx/GetUserInfo。ashx?name= ユーザー名,
関数 (データ) {
     if (データ != null) {
  $("#lblusername").html(data[0].User_Count)
  $("#lblrealname").html(data[0].User_name);
  $("#sex").html(data[0].User_Sex);
  $("#lbladdress").html(data[0].User_Address)
  $("#lblemall").html(data[0].User_Email);
  if (data[0].User_HeadImg != null&&data[0].User_HeadImg != "") {
      $("#imguserhead").attr("src", "../../Users/" data[0].User_HeadImg.toString().substring(3));
  }
  他 {
      $("#imguserhead").attr("src", "../../Users/images/900.png");
  }
  $("#messagediv").css("表示", "なし");
     }
     それ以外
  $("#messagediv").html("データに未追加!");
});
}
function HiddenInfo() {
    $("#blockdiv").css({
"表示": "なし"、
    });

$("#lblusername").html("")
    $("#lblrealname").html("");
    $("#sex").html("");
    $("#lbladdress").html("")
    $("#lblemall").html("");
}

(5)、调用

复制代代码如下:

')" onmouseout="HiddenInfo()">
jquery鼠标滑过显示示唆框

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。