jQueryは、マウスをit上でスライドさせると画像がポップアップする特殊効果を実現します

jQueryは、マウスをit上でスライドさせると画像がポップアップする特殊効果を実現します_jquery

WBOY

リリース： 2016-05-16 15:21:08

オリジナル

1387 人が閲覧しました

この章では、一般的に使用されるエフェクトを紹介します。つまり、マウスがリンク上をスライドすると、マウスポインターの動きに追従するレイヤーが表示されます。実際のアプリケーションでは、通常、リンクの説明テキストや画像が表示されます。、など。お待ちください、

まずデモ写真を見てみましょう

以下はコード例です:

<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 属性の内容です。例: Thumbnail a タグに大きな画像を表示するメソッドが含まれている場合、ページには href が指す画像「xx.jpg」が表示されます。

2. 使用されるメソッドは次のとおりです: target selector.preview(); たとえば、上記の thumbnail の場合は、$("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 != "") ? "
" this.t : ""、this.t が空でない場合、つまり title 属性値が存在する場合、次に、改行文字を挿入し、現在のヘッダーの内容を連結します。それ以外の場合は、 c を空に設定します。

7.$("body").append("

" 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 イベントの章を参照してください。