JavaScript を使用して画像を左右にスライドさせ、ズーム効果を追加するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用して画像を左右にスライドさせ、ズーム効果を追加するにはどうすればよいですか?

WBOY

リリース： 2023-10-18 11:15:59

オリジナル

1284 人が閲覧しました

JavaScript 如何实现图片的左右滑动并加入缩放效果？

JavaScript 画像を左右にスライドさせてズーム効果を追加するにはどうすればよいですか?

インターネットの発展により、写真は私たちの日常生活に欠かせないものになりました。 Webデザインでは、写真の表現方法も非常に重要です。この記事ではJavaScriptを使って画像を左右にスライドさせたり、ズーム効果を加える方法を紹介します。

1. HTML 構造

まず、HTML でイメージコンテナを作成し、その中にイメージ要素をネストする必要があります。例:

<div class="slider">
  <img src="image1.jpg" alt="">
</div>

ログイン後にコピー

2. CSS スタイルの追加

次に、イメージコンテナが正常に表示され、特定のサイズになるように、いくつかの基本的な CSS スタイルをイメージコンテナに追加する必要があります。。例:

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ログイン後にコピー

3. 左右のスライド効果を実現するには、

まず、イメージコンテナとイメージ要素を取得し、各スライドの距離を計算する必要があります。コードは次のとおりです。

var slider = document.querySelector('.slider');
var image = document.querySelector('.slider img');
var slideDistance = 200; // 每次滑动的距离

ログイン後にコピー

次に、スライドイベントを画像コンテナにバインドし、スライドの方向に応じて画像表示の位置を調整します。コードは次のとおりです:

slider.addEventListener('mousedown', startSlide);

function startSlide(e) {
  var startX = e.clientX;
  slider.addEventListener('mousemove', slideImage);

  function slideImage(e) {
    var moveX = e.clientX - startX;
    image.style.transform = 'translateX(' + moveX + 'px)';
  }

  slider.addEventListener('mouseup', stopSlide);
  slider.addEventListener('mouseleave', stopSlide);

  function stopSlide(e) {
    slider.removeEventListener('mousemove', slideImage);
    var moveX = e.clientX - startX;
    var absMoveX = Math.abs(moveX);
    var direction = moveX > 0 ? 'right' : 'left';

    if (absMoveX > slideDistance) {
      if (direction === 'right') {
        slideTo('prev');
      } else {
        slideTo('next');
      }
    } else {
      resetSlide();
    }
  }

  function resetSlide() {
    image.style.transform = 'translateX(0)';
  }

  function slideTo(direction) {
    var currentImageIndex = getIndex(image.getAttribute('src'));

    if (direction === 'prev') {
      currentImageIndex--;
    } else {
      currentImageIndex++;
    }

    if (currentImageIndex < 0) {
      currentImageIndex = imageList.length - 1;
    } else if (currentImageIndex >= imageList.length) {
      currentImageIndex = 0;
    }

    image.src = imageList[currentImageIndex];
    resetSlide();
  }
}

ログイン後にコピー

4. ズーム効果の追加

画像をスライドさせながらズーム効果を実現したい場合は、スライドイベントでスライド距離を取得し、距離に応じて画像のサイズを変更します。コードは次のとおりです。

// 在 slideImage 函数中添加以下代码

function slideImage(e) {
  var moveX = e.clientX - startX;
  var scale = 1 - Math.abs(moveX) / (slider.offsetWidth / 2);

  if (scale < 0.3) {
    scale = 0.3;
  }

  image.style.transform = 'translateX(' + moveX + 'px) scale(' + scale + ')';
}

ログイン後にコピー

上記のコードの実装により、Web ページ上で画像を左右にスライドさせ、ズーム効果を追加できます。同時に、実装プロセス中に、特定の設計ニーズを満たすために、必要に応じてスライド距離やスケーリング率などを調整できます。

以上がJavaScript を使用して画像を左右にスライドさせ、ズーム効果を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。