マウスが小さな image_jquery 上をスライドしたときに大きな画像を表示する jquery メソッド

この記事の例では、マウスが小さな画像の上をスライドしたときに大きな画像を表示するメソッドを jquery がどのように実装するかを説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

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

<頭>





<スクリプトタイプ="text/javascript">
var data = {
"images/11_s.jpg":["images/11_b.jpg","美人1"],
"images/22_s.jpg":["images/22_b.jpg","美人2"],
"images/33_s.jpg":["images/33_b.jpg","美人3"],
"images/44_s.jpg":["images/44_b.jpg","美人4"]
};
$(関数(){
$.each(データ,関数(キー,値){
//非表示にする最後の div を初期化します
$("div").last().hide();
//小さなグラフノードを作成します
var smallPath = $("").css({"margin":"5px","padding":"2px","border":"1px ソリッド #000 "});
//大きい画像のアドレスと名前を設定します
bigImgPath = smallPath.attr("bigMapPath",value[0]);
bigImgName = smallPath.attr("bigMapName",value[1]);

$("div").first().append(smallPath);

//サムネイルにイベントを追加します
smallPath.mouseover(function(){
//最後の div フェードイン効果
$("div").last().fadeIn("fast");
// 全体像のアドレスを取得します
$("#show").attr("src",$(this).attr("bigMapPath"));
// 大きな画像の名前を取得し、スタイルを設定します
$("#imgTitle").text($(this).attr("bigMapName")).css({"background":"#ebf1de","padding":"10px","margin-bottom":" 10px"});
});
smallPath.mouseout(function(){
$("div").last().fadeOut("fast");
});
});
});

この記事が皆さんの jQuery プログラミングに役立つことを願っています。