ホームページ > 記事 > ウェブフロントエンド > jQueryは、マウスをit上でスライドさせると画像がポップアップする特殊効果を実現します_jquery
jQueryは、マウスをit上でスライドさせると画像がポップアップする特殊効果を実現します_jquery
- WBOYオリジナル
- 2016-05-16 15:21:081297ブラウズ
この章では、一般的に使用されるエフェクトを紹介します。つまり、マウスがリンク上をスライドすると、マウス ポインターの動きに追従するレイヤーが表示されます。実際のアプリケーションでは、通常、リンクの説明テキストや画像が表示されます。 、など。お待ちください、
まずデモ写真を見てみましょう
以下はコード例です:
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("a.preview").preview();
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
</style>
</head>
<body>
<div class="zxx_out_box">
<div class="zxx_in_box">
<h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
<div class="zxx_main_con">
<div class="zxx_test_list">
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm1.jpg" title="张含韵">
<img src="http://image.jb51.net/image/study/s/s128/mm1.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm2.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm2.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm3.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm3.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm4.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm4.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm5.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm5.jpg" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
上記のコードは要件を満たしていますが、どう思いますか?
次に、その使用方法の簡単な説明を見てみましょう:
1. a タグの href 属性を使用する必要があります。この jQuery プラグインの原理は、マウスがサムネイル (またはリンク テキスト) に移動すると、href ポインティング パスを含む大きな画像 HTML フラグメントが表示されることです。このフラグメントは、マウスの位置に基づいて絶対的に配置されます。これにより、サムネイル上でマウスを移動すると、より大きな画像が表示される効果が得られます。大きな画像のアドレスは、a タグの href 属性の内容です。例: 86143da451ad1c7e93dd44b388fa0ce5Thumbnail5db79b134e9f6b82c0b36e0489ee08ed a タグに大きな画像を表示するメソッドが含まれている場合、ページには href が指す画像「xx.jpg」が表示されます。
2. 使用されるメソッドは次のとおりです: target selector.preview(); たとえば、上記の 86143da451ad1c7e93dd44b388fa0ce5thumbnail5db79b134e9f6b82c0b36e0489ee08ed の場合は、$("a") を使用できます。 .preview(); このコードは、マウスをテキストリンク「サムネイル」に移動したときに画像 xx.jpg を表示する効果を実装します。
3. png、gif、jpg、bmp の 4 つの形式の画像のみがサポートされています。プラグイン コードの正規表現を変更して、サポートされる画像形式の種類を拡張できます。
以下は実装プロセスの簡単な紹介です:
1. コードのコメント:
1.this.screenshotPreview=function(){ } は、次の効果を実装する関数を宣言します。この効果では、実際には省略できます。ウィンドウを指します。
2.xOffset=10、ポップアップ画像からのマウスポインターの水平距離を指定する変数を宣言します。
3.yOffset=30、ポップアップ画像からマウスポインターの垂直距離を指定する変数を宣言します。
4.$("a.screenshot").hover(function(e){}, function(e){}) は、マウスがリンクに移動したときとリンクから離れたときに実行される関数を指定します。
5.this.t = this.title、リンクの title 属性値を t 属性に割り当てます。ここで、これは現在のマウス ホバーを指すリンク オブジェクトです。
6.var c = (this.t != "") ? "a4eb872b011765b63c111329baf00531" c "
8.$("#screenshot").css("top",(e.pageY-xOffset) "px").css("left",(e.pageX yOffset) "px").fadeIn( 「fast」）、p要素のtopとleftの属性値を設定し、フェードイン効果を使用して表示します。
9.this.title=this.t、タイトルの内容を this.title に割り当てます。実際には、この文はなくても問題ありませんが、少し冗長です。
10.$("#screenshot").remove()、p 要素を削除します。
11.$("a.screenshot").mousemove(function(e){})、マウス ポインターが移動したときに画像が追従するように設定するために使用されます。
12.$("#screenshot").css("top",(e.pageY-xOffset) "px") .css("left",(e.pageX yOffset) "px"), set p要素のtopとleftの属性値は次の効果を実現できます。
2. 関連記事:
1. hover() 関数は、jQuery のホバー イベント の章にあります。
2. append() 関数については、jQuery の append() メソッド の章を参照してください。
3. css() 関数については、jQuery の css() メソッド の章を参照してください。
4. pageY 属性については、jQuery のevent.pageY 属性の章を参照してください。
5. fadeIn() 関数については、 jQuery の fadeIn() メソッドの章を参照してください。
6. Remove() 関数については、 jQuery の Remove() メソッド の章を参照してください。
7. Mousemove イベントについては、 jQuery の Mousemove イベント の章を参照してください。