検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jquery は、マウスが it_jquery 上をスライドしたときにプロンプ​​ト ボックスを表示するメソッドを実装します。

jquery は、マウスが it_jquery 上をスライドしたときにプロンプ​​ト ボックスを表示するメソッドを実装します。

WBOY
WBOYオリジナル
2016-05-16 16:15:381516ブラウズ

この記事の例では、マウスが上をスライドしたときにプロンプ​​ト ボックスを表示する 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"}, "高速");
});
});







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)、调用

复制代代码如下:

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

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

関連記事

続きを見る
用户名：
     
  
真实姓名：
     
  
性别：
     
  
所属地区：
     
  
邮箱：