jQueryは、マウスがpicture_jqueryの上を通過すると大きな画像プレビューの効果を実現します

jQuery: これはクライアント側のテクノロジーです。その誕生の理由は、少ないコードでより多くのことを行うことです。

したがって、jQuery を使用すると、非常に優れた効果を実現できます。 、JavaScript と比較すると、効果は同じですが、コードは非常に単純です。 jQuery の中心的な知識はセレクターの使用です。セレクターの内容については、今後のブログでまとめますので、ぜひ読んでください。

このブログ投稿は、jQuery を使用して、ショッピング Web サイトでよく見られるものを実装する方法について説明しています。つまり、マウスが画像番号の上を通過すると、画像が拡大されて大きなプレビューが表示されます。次に、メイン コードを貼り付けます。まず、$(function(){})

Copy code code As

var x = 5;
var y = 15;
$("table tr td img").mousemove(function(e) {
$(" #imageTip").attr("src", this.src)//プロンプト画像のパスを設定します
.css({
"top" : (e.pageY y) "px",
" left" : (e.pageX (function(){
$("#imageTip").hide();//画像を隠す

});


次のページのレイアウト コード:

コードをコピー

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

🎜>



;/table>

オプション	名前
/td>		/td> ;/tr>
		林暁
< td>	ゴン・ミン
="checkbox" id= "checkAll">すべて選択 id="btnDel" type="button" value="削除"> 🎜>

ここでは、左側のコードの最後の行の記述にのみ注意する必要があります。上記はテーブルのレイアウトです。

次は CSS です:




コードをコピーします


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

body {
font-size: 12px;
}

table tr td img {

border: soild 1px #666; width: 240px; : 240px; カーソル: } 位置: 1px #ccc ソリッド;幅: 400 ピクセル; 高さ: 400 ピクセル; }