沃梦达 / 编程技术 / 前端开发 / 正文

页面图片浮动左右滑动效果的简单实现案例

前端开发
2024-03-09

下面是“页面图片浮动左右滑动效果的简单实现案例”的完整攻略：

下面是“页面图片浮动左右滑动效果的简单实现案例”的完整攻略：

1. 实现步骤

1.1 HTML结构

需要在HTML中定义一个div容器，用于容纳所有图片，并为每个图片添加一个标签，实现点击图片跳转。

<div class="image-container">
  <a href="#">
    <img src="image1.jpg" alt="image1">
  </a>
  <a href="#">
    <img src="image2.jpg" alt="image2">
  </a>
  <a href="#">
    <img src="image3.jpg" alt="image3">
  </a>
</div>

1.2 CSS样式

首先，给image-container容器设置宽度和高度，以及overflow:hidden属性，确保容器内部的图片只能显示容器被定义的宽度和高度。然后将要显示的图片设置为浮动元素，使其能够左右滑动。

.image-container {
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.image-container img {
  float: left;
  width: 250px;
  height: 400px;
  margin-right: 20px;
  cursor: pointer;
}

在上述代码中，我们设置了image-container容器的宽度为800px，高度为400px，并给容器定义了overflow:hidden属性，以便它只能显示800px × 400px的区域。对于每个图片，我们将其设置为左浮动，宽度为250px，高度为400px，并将图片之间的间距设置为20px。最后，为了使图片看起来更像链接，我们将文本光标设置为指针。

1.3 JavaScript

要使图片可以左右滑动，我们需要使用JavaScript来实现。这里我们使用jQuery库，因为它可以让我们的代码更加精简和易读。

首先，我们需要定义一些变量来跟踪容器和图片的位置。我们需要知道当前容器的位置、要显示的第一张图片的位置以及最后一张图片的位置。然后我们需要绑定滑动事件，以响应滑动事件。

$(document).ready(function() {
  var containerWidth = $(".image-container").width();
  var imageMargin = parseInt($(".image-container img").css("margin-right"));
  var imageWidth = $(".image-container img").outerWidth();
  var totalImages = $(".image-container img").length;
  var firstImagePosition = 0;
  var currentImagePosition = 0;

  $(".image-container").on("mousedown touchstart", function(event) {
    event.preventDefault();

    // Get the starting point of the click/touch
    var startX = event.pageX || event.originalEvent.touches[0].pageX;
    var imageClickMargin = currentImagePosition - startX;

    // Bind the mousemove/touchmove event
    $(document).on("mousemove touchmove", function(event) {
      event.preventDefault();

      // Get the new position of the click/touch
      var newX = event.pageX || event.originalEvent.touches[0].pageX;
      var newPosition = newX + imageClickMargin;

      // Check the boundaries
      if (newPosition > firstImagePosition) {
        newPosition = firstImagePosition;
      } else if (newPosition < (containerWidth - ((totalImages * imageWidth) + ((totalImages - 1) * imageMargin))) ) {
        newPosition = containerWidth - ((totalImages * imageWidth) + ((totalImages - 1) * imageMargin));
      }

      // Set the new position
      currentImagePosition = newPosition;
      $(".image-container").css({"left": newPosition + "px"});
    });
  });

  // Remove the mousemove/touchmove event when unclicked/untouched
  $(document).on("mouseup touchend", function(event) {
    $(document).off("mousemove touchmove");
  });
});

在上述代码中，我们使用jQuery的ready()函数来确保文档加载完成后执行我们的代码。然后我们使用jQuery选择器来获取image-container容器的宽度，并获取每个图片的间距和宽度。我们还需要知道图片的总数，以便在滑动时计算容器的边界。然后我们定义一些变量来跟踪容器和图片的位置。这些变量将跟踪容器的位置（即“left”属性）以及容器内第一张和最后一张图片的位置。

当用户按下鼠标或手指开始滑动时，我们需要获取他们按下的位置，并绑定mousemove/touchmove事件。在事件处理程序中，我们需要获取滑动的新位置，并检查容器的边界。最后，我们设置新位置，并移动容器。当用户在mouseup/touchend事件中放开鼠标或手指时，我们需要解除mousemove/touchmove事件绑定。

至此，我们已经实现了浮动的图片容器的左右滑动效果。

2. 示例说明

2.1 示例1

下面是一个简单的HTML页面，它实现了一个具有左右滑动功能的图片容器。每张图片都是一个链接，单击任何一张图片将跳转到相应的页面。该示例可以通过在文本编辑器中创建一个HTML文件并将以下代码复制到文件中来创建：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animated Image Gallery</title>
  <style>
    .image-container {
      width: 800px;
      height: 400px;
      overflow: hidden;
    }

    .image-container img {
      float: left;
      width: 250px;
      height: 400px;
      margin-right: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <a href="#"><img src="image1.jpg" alt="image1"></a>
    <a href="#"><img src="image2.jpg" alt="image2"></a>
    <a href="#"><img src="image3.jpg" alt="image3"></a>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var containerWidth = $(".image-container").width();
      var imageMargin = parseInt($(".image-container img").css("margin-right"));
      var imageWidth = $(".image-container img").outerWidth();
      var totalImages = $(".image-container img").length;
      var firstImagePosition = 0;
      var currentImagePosition = 0;

      $(".image-container").on("mousedown touchstart", function(event) {
        event.preventDefault();

        // Get the starting point of the click/touch
        var startX = event.pageX || event.originalEvent.touches[0].pageX;
        var imageClickMargin = currentImagePosition - startX;

        // Bind the mousemove/touchmove event
        $(document).on("mousemove touchmove", function(event) {
          event.preventDefault();

          // Get the new position of the click/touch
          var newX = event.pageX || event.originalEvent.touches[0].pageX;
          var newPosition = newX + imageClickMargin;

          // Check the boundaries
          if (newPosition > firstImagePosition) {
            newPosition = firstImagePosition;
          } else if (newPosition < (containerWidth - ((totalImages * imageWidth) + ((totalImages - 1) * imageMargin))) ) {
            newPosition = containerWidth - ((totalImages * imageWidth) + ((totalImages - 1) * imageMargin));
          }

          // Set the new position
          currentImagePosition = newPosition;
          $(".image-container").css({"left": newPosition + "px"});
        });
      });

      // Remove the mousemove/touchmove event when unclicked/untouched
      $(document).on("mouseup touchend", function(event) {
        $(document).off("mousemove touchmove");
      });
    });
  </script>
</body>
</html>

如果您的页面缺少样式，请使用上述CSS代码为您的页面添加样式。如果您使用的是不同的图片，请记得相应地更改img src属性。

2.2 示例2

下面是另一个示例，它实现了带有左右滑动功能的图片容器，并允许在幻灯片中竖直滚动。每张图片都是一个缩略图，单击缩略图将显示全屏图像。要实现此示例，请在文本编辑器中创建一个HTML文件并将以下代码复制到文件中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animated Image Gallery</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .image-container {
      width: 100%;
      height: 80%;
      overflow: hidden;
      display: flex;
      justify-content: center;
    }

    .image-container img {
      margin-right: 20px;
      height: 80%;
      cursor: pointer;
    }

    .image-container img:last-child {
      margin-right: 0;
    }

    .full-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .full-screen img {
      max-width: 90%;
      max-height: 90%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image-container">
      <img src="thumbnail1.jpg" alt="thumbnail1">
      <img src="thumbnail2.jpg" alt="thumbnail2">
      <img src="thumbnail3.jpg" alt="thumbnail3">
      <img src="thumbnail4.jpg" alt="thumbnail4">
      <img src="thumbnail5.jpg" alt="thumbnail5">
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var containerHeight = $(".image-container").height();
      var imageMargin = parseInt($(".image-container img").css("margin-right"));
      var imageHeight = $(".image-container img").outerHeight();
      var totalImages = $(".image-container img").length;
      var firstImagePosition = 0;
      var currentImagePosition = 0;

      $(".image-container").on("mousedown touchstart", function(event) {
        event.preventDefault();

        // Get the starting point of the click/touch
        var startY = event.pageY || event.originalEvent.touches[0].pageY;
        var imageClickMargin = currentImagePosition - startY;

        // Bind the mousemove/touchmove event
        $(document).on("mousemove touchmove", function(event) {
          event.preventDefault();

          // Get the new position of the click/touch
          var newY = event.pageY || event.originalEvent.touches[0].pageY;
          var newPosition = newY + imageClickMargin;

          // Check the boundaries
          if (newPosition > firstImagePosition) {
            newPosition = firstImagePosition;
          } else if (newPosition < (containerHeight - ((totalImages * imageHeight) + ((totalImages - 1) * imageMargin)))) {
            newPosition = containerHeight - ((totalImages * imageHeight) + ((totalImages - 1) * imageMargin));
          }

          // Set the new position
          currentImagePosition = newPosition;
          $(".image-container").css({"top": newPosition + "px"});
        });
      });

      // Remove the mousemove/touchmove event when unclicked/untouched
      $(document).on("mouseup touchend", function(event) {
        $(document).off("mousemove touchmove");
      });

      // Display full-screen image on click
      $(".image-container img").on("click", function(){
        var fullScreenContainer = $("<div>").addClass("full-screen");
        var fullScreenImage = $("<img>").attr("src", $(this).attr("src"));
        fullScreenContainer.append(fullScreenImage);
        $("body").append(fullScreenContainer);
      });

      // Close full-screen on click
      $("body").on("click", ".full-screen", function(){
        $(this).remove();
      });
    });
  </script>
</body>
</html>

该示例实现了一个带有左右滑动功能的图片容器，并允许在幻灯片中竖直滚动。我们使用了flexbox布局，使图像居中并允许竖直滚动。我们还实现了单击缩略图时显示全屏的图像的功能，并在单击全屏图像时关闭全屏显示。

如果您的页面缺少样式，请使用上述CSS代码为您的页面添加样式。如果您使用的是不同的图片，请记得相应地更改img src属性。

这里是示例2的完整演示：Animated Image Gallery

本文标题为：页面图片浮动左右滑动效果的简单实现案例

上一篇： web前端性能优化之合理的优化网站图片可以带来更多的流量
下一篇： javascript高仿热血传奇游戏实现代码

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2