jQueryのスライディングメソッド-フロントエンドQ&A-php.cn

jQueryのスライディングメソッド

WBOY

リリース： 2023-05-24 22:43:37

オリジナル

571 人が閲覧しました

jQuery は非常に人気のある Javascript ライブラリであり、HTML および CSS 要素をより簡単に操作できるようにする多数のユーティリティ関数とメソッドが含まれています。今回はjQueryを使ったスライディングメソッドの実装方法を紹介します。

はじめに

スライドは、ユーザーがページ上で要素をドラッグできるようにする一般的なユーザーインタラクションアクションであり、状況によっては必要になる場合があります。たとえば、カルーセル画像では、ユーザーがジェスチャーによって次の画像または前の画像に切り替えることができることを期待しているため、これを実現するにはスライドメソッドを実装する必要があります。

ジェスチャ認識

スライド方式を実装する前に、まずジェスチャ認識を実行して、ユーザーが水平にスライドしているか垂直にスライドしているかを判断する必要があります。 jQuery では、mousedown、mousemove、mouseup などのイベントを使用してジェスチャ認識を実装できます。具体的なコードは次のとおりです。

var startX, startY, endX, endY;

$(document).on('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
});

$(document).on('mousemove', function(e) {
  endX = e.clientX;
  endY = e.clientY;

  var direction = swipeDirection(startX, startY, endX, endY);
});

$(document).on('mouseup', function(e) {
  endX = e.clientX;
  endY = e.clientY;

  var direction = swipeDirection(startX, startY, endX, endY);
});

function swipeDirection(startX, startY, endX, endY) {
  var diffX = Math.abs(startX - endX);
  var diffY = Math.abs(startY - endY);

  if (diffX > diffY) {
    return (startX > endX) ? 'left' : 'right';
  } else {
    return (startY > endY) ? 'up' : 'down';
  }
}

ログイン後にコピー

上記のコードでは、ユーザーが mousedown イベントを通じてジェスチャのトリガーを開始する座標を記録し、その後 # を通じてユーザーを記録します。 ##mousemove イベントスライドが終了する座標については、swipeDirection 関数を使用して、ユーザーが水平にスライドしたか垂直にスライドしたかを判断できます。最後に、mouseup イベントを使用して、ジェスチャ終了時の座標を記録します。

ジェスチャ認識を実行した後、スライディングメソッドを実装できます。次の例では、jQuery の

animate メソッドを使用してスムーズなスライドアニメーションを実装し、画像がドラッグされたときにジェスチャに追従できるようにします。

<!DOCTYPE html>
<html>
<head>
  <title>滑动方法示例</title>
</head>
<body>
  <div style="width: 800px; height: 400px; overflow: hidden;">
    <img id="slider" style="width: 4000px; height: 400px;" src="1.jpg, 2.jpg, 3.jpg, 4.jpg">
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var slider = $('#slider');
  var currentPos = 0; //记录当前的位置
  var sliderWidth = slider.width(); //获取图片宽度
  var len = slider.children('img').length; //获取图片数量

  //监听鼠标按下事件
  slider.on('mousedown', function(e) {
    var startX = e.pageX; //获取鼠标按下时的坐标
    var left = parseFloat(slider.css('left')); //获取初始位置
    var endX;

    //监听鼠标移动事件
    slider.on('mousemove', function(e) {
      endX = e.pageX; //获取鼠标移动时的坐标

      slider.css('left', left + endX - startX); //设置图片位置
    });

    //监听鼠标松开事件
    slider.on('mouseup', function(e) {
      $(this).off('mousemove'); //取消鼠标移动事件的监听

      var direction = swipeDirection(startX, 0, endX, 0); //判断手势方向

      if (direction === 'left' && currentPos < len - 1) {
        currentPos++; //向左滑动，图片位置加1
        slider.animate({
          left: '-=' + sliderWidth
        });
      } else if (direction === 'right' && currentPos > 0) {
        currentPos--; //向右滑动，图片位置减1
        slider.animate({
          left: '+=' + sliderWidth
        });
      } else {
        slider.animate({
          left: '-=' + (endX - startX) //回到原来的位置
        });
      }
    });

    //阻止默认事件
    e.preventDefault();
  });
</script>
</html>

ログイン後にコピー

上記のコードでは、最初に

mousedown イベントを使用して画像をスライドするときのユーザーの座標を記録し、次に mousemove イベントを使用して継続的に画像が指に追従するように計算します。スライド距離、そして最後に mouseup イベントを使用して、ユーザーのスライドの方向を決定し、スムーズなスライドアニメーションを実行します。

#概要

この記事では、jQuery を使用してスライディングメソッドを実装する方法を紹介します。まずジェスチャ認識を実行してユーザーが水平方向にスライドしているか垂直方向にスライドしているかを判断し、ユーザーのスライド方向に基づいて滑らかなスライドアニメーションを実装します。このようにして、カスタマイズされた多くのユーザーインタラクション効果をページに実装し、ユーザーにより良いエクスペリエンスを提供できます。

以上がjQueryのスライディングメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。