jQuery映像特殊効果プラグイン Revealingで伸縮・拡大を実現

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery映像特殊効果プラグイン Revealingで伸縮・拡大を実現_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:02 PM

写真をクリックすると写真が引き伸ばされて拡大されます。効果は絶大です。

使用方法:

1. ヘッド領域参照ファイル jquery.js、photorevealer.js、datouwang.css

2. 地域コードを追加します

3. 写真の数は自由に追加または削除できます

4. 画像にさらに多くの情報があり、より多くのスペースが必要な場合は、photorevealer.js の 36 行目の番号を変更できます

コアコード:

$(document).ready(function(){
     
$('.photo_slider').each(function(){
   
  var $this = $(this).addClass('photo-area');
  var $img = $this.find('img');
  var $info = $this.find('.info_area');
     
  var opts = {};
   
  $img.load(function(){
    opts.imgw = $img.width();
    opts.imgh = $img.height();
  });
   
  opts.orgw = $this.width();
  opts.orgh = $this.height();
   
  $img.css ({
    marginLeft: "-150px",
    marginTop: "-150px"
  });
   
  var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this);
 
  var $open = $('<a href="#" class="more_info">More Info ></a>').appendTo($this);
   
  var $close = $('<a class="close">Close</a>').appendTo($info);
   
  opts.wrapw = $wrap.width();
  opts.wraph = $wrap.height();
   
  $open.click(function(){
    $this.animate({ 
      width: opts.imgw,
      height: (opts.imgh+30),
      borderWidth: "10"
    }, 600 );
         
    $open.fadeOut();
     
    $wrap.animate({ 
      width: opts.imgw,
      height: opts.imgh
    }, 600 );
 
    $(".info_area",$this).fadeIn();
     
    $img.animate({
      marginTop: "0px",
      marginLeft: "0px"
    }, 600 );
     
    return false;
  });
   
  $close.click(function(){
    $this.animate({ 
      width: opts.orgw,
      height: opts.orgh,
      borderWidth: "1"
     }, 600 );
     
    $open.fadeIn();
     
    $wrap.animate({ 
      width: opts.wrapw,
      height: opts.wraph
       }, 600 );
     
      $img.animate({
        marginTop: "-150px",
        marginLeft: "-150px"
      }, 600 );
 
    $(".info_area",$this).fadeOut();
    return false;
  });
   
});
 
});

上記はこの記事のコード全体です。皆さんに気に入っていただければ幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

PHP チュートリアル

1679

276

NYTの接続はヒントと回答です

328

836

Related knowledge

JavaScriptは、クリックスルーイメージの切り替え効果を実現します：プロフェッショナルチュートリアル Sep 18, 2025 pm 01:03 PM

この記事では、JavaScriptを使用して画像をクリックする効果を実現する方法を紹介します。コアのアイデアは、HTML5のデータ - *属性を使用して、代替画像パスを保存し、JavaScriptを介してクリックイベントをリッスンし、SRC属性を動的に切り替えて、画像の切り替えを実現することです。この記事では、詳細なコードの例と説明を提供して、この一般的に使用されるインタラクティブ効果を理解し、習得するのに役立ちます。

JavaScriptでGeolocation APIを使用してユーザーの位置を取得するにはどうすればよいですか？ Sep 21, 2025 am 06:19 AM

まず、ブラウザがGeolocationapiをサポートしているかどうかを確認します。サポートされている場合は、getCurrentPosition（）を呼び出してユーザーの現在の位置座標を取得し、成功したコールバックを通じて緯度と経度の値を取得します。同時に、拒否許可、場所の利用不能、タイムアウトなどのエラーコールバック処理の例外を提供します。また、高精度を有効にするために構成オプションを渡し、タイムアウト時間とキャッシュの妥当性期間を設定することもできます。プロセス全体には、ユーザー承認と対応するエラー処理が必要です。

JavaScriptでマルチライン文字列を作成する方法は？ Sep 20, 2025 am 06:11 AM

thebestatatororeAteamulti-linestringinjavascriptsisingsisingSemplatalalswithbackticks、whitherverebreakenexactlyaswritten。

javascriptでの数字のフォーマット：tofixed（）メソッドを使用して、固定小数点以下の場所を保持します Sep 16, 2025 am 11:57 AM

このチュートリアルでは、JavaScriptに固定された2つの小数を持つ文字列に数値をフォーマットする方法を詳細に説明します。整数でさえ「＃.00」の形で表示できます。 number.prototype.tofixed（）メソッドの使用に焦点を当てます。これには、その構文、機能、サンプルコード、およびそのリターンタイプが常に文字列であるなどの重要なポイントが含まれます。

Nuxt 3組成APIについて説明しました Sep 20, 2025 am 03:00 AM

NUXT3の構成APIコア使用量には次のものが含まれます。1。DefinePageMetaは、タイトル、レイアウト、ミドルウェアなどのページメタ情報を定義するために使用されます。 2。Useheadは、ページヘッダータグを管理し、静的およびレスポンシブな更新をサポートし、SEO最適化を実現するためにDefinePageMetaと協力する必要があります。 3. useasyncdataは、非同期データを安全に取得し、負荷とエラーステータスを自動的に処理し、サーバーとクライアントのデータ収集制御をサポートします。 4. usefetchは、useasyncdataと$ fetchのカプセル化であり、リクエストキーを自動的にエンスして、リクエストを重複しないようにします

javascriptでsetintervalで繰り返し間隔を作成する方法 Sep 21, 2025 am 05:31 AM

JavaScriptに繰り返し間隔を作成するには、SetInterval（）関数を使用する必要があります。これは、指定されたミリ秒間隔で関数またはコードブロックを繰り返し実行する必要があります。たとえば、setinterval（（）=> {console.log（ "2秒ごとに実行"）;}、2000）は、clearinterval（intervalid）によってクリアされるまで2秒ごとにメッセージを出力します。実際のアプリケーションでは、クロック、投票サーバーなどを更新するために使用できますが、最小遅延制限と機能実行時間の影響に注意を払い、メモリの漏れを避けるために不要になった時間の間隔をクリアします。特にコンポーネントのアンインストールまたはページの閉鎖の前に、それを確認してください

JavaScriptのDOM要素アクセスのための一般的な落とし穴とソリューション Sep 15, 2025 pm 01:24 PM

この記事の目的は、javascriptのdocument.getElementbyid（）を介してDOM要素を取得するときにnullを返す問題を解決することを目的としています。コアは、スクリプトの実行タイミングとDOM解析ステータスを理解することです。タグを正しく配置するか、DomContentLoadedイベントを使用することにより、要素が利用可能なときに再び試行され、そのようなエラーを効果的に回避することができます。