jQuery は、マウスを大きな画像上でスライドさせたときに大きな画像をプレビューする効果を実現します

この記事では、jQuery のマウス イベント応答とページ要素の属性の動的操作を含む、マウス オーバー プレビュー画像の大規模な効果を実現する jQuery の方法を主に紹介します。必要な方は参考にしていただければ幸いです。

この記事の例では、マウスをロールオーバーしたときに大きな画像をプレビューする効果を jQuery が実装する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

要件は次のとおりです: マウスを移動した画像上で、大きな画像のプレビューが同時に表示され、マウスを移動すると、大きな画像のプレビューが表示されます。離れると非表示になります。

原理は実際には非常に簡単です。まず、p が必要で、次に jQuery メソッドを使用して タグを動的に追加し、 のスタイル (幅、高さ) とそのパスを変更します。表示する必要がある画像。

jsコード：

$(function(){
  var ei = $("#large");
  ei.hide();
  $("#img1, img").mousemove(function(e){
    ei.css({top:e.pageY,left:e.pageX}).html(&#39;<img  src="/static/imghwm/default1.png"  data-src="&#39; + this.src + &#39;"  class="lazy"    style="max-width:90%"  / alt="jQuery は、マウスを大きな画像上でスライドさせたときに大きな画像をプレビューする効果を実現します" >&#39;).show();
  }).mouseout( function(){
    ei.hide();
  })
  $("#f1").change(function(){
    $("#img1").attr("src","file:///"+$("#f1").val());
  })
});

htmlパート：

rreee

関係の推奨事項：

javascript非frash upload uploadchpを達成するための画像機能ビデオプレビュー画像を取得する簡単な方法

JS実装電気 ビジネスタッチ拡大効果

以上がjQuery は、マウスを大きな画像上でスライドさせたときに大きな画像をプレビューする効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。