图片的左右移动，js动画效果实现代码

2023年6月11日上午1:01 • JavaScript

图片左右移动是一种常见的动画特效，通常用于网站的广告展示或轮播图中。实现这种特效需要使用JavaScript的动画效果。

下面是通过步骤来讲解如何实现图片的左右移动。

步骤1：创建HTML文件和CSS样式

首先，我们需要创建一个HTML文件并在其中创建一个图片元素。然后，我们需要使用CSS样式表来定义图片的样式，包括宽度和高度，以及它的左右位置等属性。

下面是一个基本的HTML文件结构和CSS样式的定义：

<!DOCTYPE html>
<html>
  <head>
    <title>图片左右移动动画效果</title>
    <style>
      #image {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <img src="image.jpg" id="image">
  </body>
</html>

在上面的代码中，我们使用CSS样式表来将图片水平居中，垂直居中，并使其占据200像素的宽度和高度。我们还使用“absolute”定位使图片跟踪其最近的定位的祖先元素。

步骤2：创建JavaScript函数

接下来，我们需要创建一个JavaScript函数来实现图片的左右移动。在这个函数中，我们将设置一个计时器，以便每隔一段时间更新图片的left属性来实现移动效果。

下面是示例代码：

function moveImage() {
  var image = document.getElementById("image");
  var x = 0;
  var direction = 1;
  var interval = setInterval(function() {
    x += direction * 5;
    image.style.left = x + "px";
    if (x >= 200) {
      direction = -1;
    } else if (x <= 0) {
      direction = 1;
    }
  }, 30);
}

上面的代码中，我们首先获取图片的元素并定义一些变量。然后我们创建了一个计时器，定时更新图片的left属性。在每次更新时，我们增加或减少变量x的值来改变图片的位置，并检查是否到达了左侧或右侧边缘，如果是，则改变变量“direction”的方向。

步骤3：触发动画效果

最后，我们需要创建一个按钮或其他方式来触发我们的动画效果。在这个例子中，我们将在页面上创建一个按钮，点击它后将调用我们的JavaScript函数来启动动画效果。

下面是示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>图片左右移动动画效果</title>
    <style>
      #image {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <img src="image.jpg" id="image">
    <button onclick="moveImage()">Start</button>
    <script>
      function moveImage() {
        var image = document.getElementById("image");
        var x = 0;
        var direction = 1;
        var interval = setInterval(function() {
          x += direction * 5;
          image.style.left = x + "px";
          if (x >= 200) {
            direction = -1;
          } else if (x <= 0) {
            direction = 1;
          }
        }, 30);
      }
    </script>
  </body>
</html>

在上面的代码中，我们向HTML文件添加一个按钮，并创建一个单击事件处理程序来触发JavaScript函数，从而启动动画效果。

另外一个实例：

如果想要让图片先渐隐一段时间再出现可以通过修改CSS以及JavaScript中计时器的时间来实现。如下：

<!DOCTYPE html>
<html>
  <head>
    <title>图片左右移动动画效果</title>
    <style>
      #image {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, -50%);
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <img src="image.jpg" id="image">
    <button onclick="moveImage()">Start</button>
    <script>
      function moveImage() {
        var image = document.getElementById("image");
        var x = 0;
        var direction = 1;
        var interval = setInterval(function() {
          x += direction * 5;
          image.style.left = x + "px";
          if (x >= 200) {
            direction = -1;
          } else if (x <= 0) {
            direction = 1;
          }
        }, 30);
        setTimeout(function() {
          image.style.opacity = 1;
        }, 1000);
      }
    </script>
  </body>
</html>

在上面的代码中，我们将图片的透明度设置为0，然后使用setTimeout函数在1000毫秒后将其透明度设置为1，以便在动画开始前等待1秒钟。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：图片的左右移动，js动画效果实现代码 - Python技术站