CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？

クールなWebインタラクションを作成する：画像をクリックすると、周囲の写真が広がり、拡大してください！

多くのWebサイトはこの説得力のある相互作用を使用しています。画像をクリックすると拡大しますが、周囲の画像が広がります。この記事では、CSS3とJavaScriptを使用してこの効果を達成する方法を詳細に説明します。

まず、各画像にクリックイベントリスナーを追加する必要があります。ユーザーが画像をクリックすると、JavaScriptコードが実行され、すべての画像の位置とサイズが変更されます。重要なのは、CSS3のtransform属性を使用して、画像の変位とスケーリングを実現することです。

手順は次のとおりです。

1。HTML構造：それぞれ<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337946553.jpg" class="lazy" alt="CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？ "> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312337917621.jpg" class="lazy" alt="CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？ "> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174312338030325.jpg" class="lazy" alt="CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？ "> 2。JavaScriptコード： spread()関数は、クリックされた画像要素をパラメーターとして受信し、他の画像の変位とスケーリング比を計算します。

関数スプレッド（IMG）{
  const images = document.getElementsByTagname（ 'img'）;
  const index = array.prototype.indexof.call（img、img）;
  for（let i = 0; i <images.length i const distance="math.sqrt（math.pow（i" angle="（i" math.pi x="100" math.cos y="100" math.sin .style.transform="`translate（$" px><p>このコードでは、 <code>Math.sin</code>および<code>Math.cos</code>関数が画像変位を計算し、 <code>100</code>散乱半径を制御し、 <code>scale</code>スケーリング比を制御します。クリックされた画像のスケールは2で、他の画像はそのまま残ります。</p>
<p> <strong>3。CSSスタイル：</strong>画像の初期位置、サイズ、遷移効果を設定します。</p>
<pre class="brush:php;toolbar:false"> img {
  位置：絶対;
  左：50％;
  トップ：50％;
  変換：翻訳（-50％、-50％）スケール（1）;
  遷移：0.5sの容易さを変換します。
  /*画像サイズなどの他のスタイルを追加*/
  幅：100px;
  高さ：100px;
}

position: absolute画像を絶対に配置し、 translate(-50%, -50%)画像に翻訳し、 transition属性により画像変換プロセスがスムーズに遷移することができます。

上記の手順を通して、周囲の写真を散乱させ、クリックした後に自分で拡大する効果を実現できます。コード内のパラメーターを調整して（半径の広がり、スケーリング、移行時間など）、ユーザーエクスペリエンスを強化するためにアニメーションまたはインタラクションの詳細を追加することで、効果を微調整できます。 "image1.jpg" 、 "image2.jpg" 、および"image3.jpg"実際の画像パスとして置き換えることを忘れないでください。

以上がCSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。