いくつかの一般的な JavaScript 画像効果

JavaScript は動的でインタラクティブなプログラミング言語として、Web 開発に不可欠な部分になっています。その中でも、JavaScript は画像処理とプレゼンテーションのための豊富な効果とメソッドを提供し、Web ページ上でさまざまな見事な視覚効果を実現し、ユーザー エクスペリエンスを向上させることができます。次に、この記事では、JavaScript の一般的な画像効果をいくつか紹介します。

1. 画像カルーセル

画像カルーセルは、Web ページ上の一般的な画像効果であり、同じ位置に複数の画像を順番に表示できます。この効果は美しく実用的なだけでなく、Web サイトへのトラフィックを増やすこともできます。 JavaScript では、カルーセル画像を実装する基本原理は、タイマーと配列を通じて画像アドレスと関連するスタイル シートを継続的に切り替えることです。

以下は簡単な画像カルーセルの例です:

HTML:

<div>
  <img  class="active lazy" src="/static/imghwm/default1.png" data-src="img1.jpg" alt="いくつかの一般的な JavaScript 画像効果" >
  <img  src="/static/imghwm/default1.png" data-src="img2.jpg" class="lazy" alt="いくつかの一般的な JavaScript 画像効果" >
  <img  src="/static/imghwm/default1.png" data-src="img3.jpg" class="lazy" alt="いくつかの一般的な JavaScript 画像効果" >
</div>

CSS:

#slider img {
  display: none;
  width: 100%;
}
  
#slider img.active {
  display: block;
}

JavaScript:

let sliderImages = document.querySelectorAll('#slider img');
let currentImageIndex = 0;

setInterval(() => {
  sliderImages[currentImageIndex].classList.remove('active');
  currentImageIndex = (currentImageIndex + 1) % sliderImages.length;
  sliderImages[currentImageIndex].classList.add('active');
}, 3000);

二、画像のプリロード

画像のプリロードでは、画像が実際に表示される前に事前に画像リソースを読み込むことができます。これにより、画像がページ上でスムーズに表示され、Web サイトのユーザー エクスペリエンスが向上します。 JavaScript では、画像のプリロードは主に、新しい Image オブジェクトを作成し、そのオブジェクトに src 属性を設定して画像をプリロードすることによって実現されます。

次は簡単な画像のプリロード例です:

JavaScript:

function preloadImage(url) {
  let img = new Image();
  img.src = url;
}

preloadImage("img1.jpg");
preloadImage("img2.jpg");
preloadImage("img3.jpg");

3. 画像のドラッグ

画像のドラッグにより、ユーザーはコントロール画像をスライドさせることができます。ドラッグ アンド ドロップ操作により、Web サイトの対話性が向上します。 JavaScript では、画像のドラッグ操作はマウス イベントをリッスンすることによって実装されます。

以下は簡単な画像ドラッグの例です:

HTML:

<div>
  <img  src="/static/imghwm/default1.png" data-src="img.jpg" class="lazy" alt="いくつかの一般的な JavaScript 画像効果" >
</div>

CSS:

#image-container {
  position: relative;
}
  
#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
}

JavaScript:

let image = document.querySelector('#image-container img');
let isDragging = false;
let startX, startY;

image.addEventListener('mousedown', function(event) {
  isDragging = true;
  startX = event.clientX - image.offsetLeft;
  startY = event.clientY - image.offsetTop;
});
  
image.addEventListener('mousemove', function(event) {
  if (isDragging) {
    image.style.left = (event.clientX - startX) + 'px';
    image.style.top = (event.clientY - startY) + 'px';
  }
});

image.addEventListener('mouseup', function(event) {
  isDragging = false;
});

four 、画像のぼかし

画像のぼかしは、Web ページで一般的に使用される特殊効果で、画像をぼかし、Web サイトの視覚効果を柔らかくすることができます。 JavaScript では、CSS の filter 属性を使用して画像のぼかし効果を実現します。

以下は簡単な画像ぼかしの例です:

HTML:

<img  src="/static/imghwm/default1.png" data-src="img.jpg" class="lazy" alt="いくつかの一般的な JavaScript 画像効果" >

CSS:

#blur-image {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

コードでは、ぼかし関数パラメータを調整できます。値を使用して画像のぼかしレベルを調整します。

上記は、いくつかの一般的な JavaScript 画像効果です。もちろん、JavaScript には画像のサイズ変更や画像フィルターなど、他にも多くの画像効果があります。特定のニーズに応じて適切なテクノロジを選択して実装できます。つまり、Web 開発プロセスにおいて、JS 画像効果を追加することは、ユーザー エクスペリエンスを向上させる良い方法です。

以上がいくつかの一般的な JavaScript 画像効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。