javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

2023年6月11日上午12:39 • JavaScript

下面是 “javascript运动效果实例总结(放大缩小、滑动淡入、滚动)” 的详细攻略：

1. 放大缩小实例

该实例可以通过javascript实现图片的放大和缩小，具体思路如下：

1.1 给图片添加鼠标事件

在html中给需要放大缩小的图片添加mouseenter事件：

<img src="picture.jpg" id="pic" onmouseenter="picZoomIn()" onmouseleave="picZoomOut()">

1.2 编写缩放函数

编写JS代码，定义两个函数picZoomIn()和picZoomOut()，分别实现放大和缩小图片功能：

function picZoomIn() {
  document.getElementById("pic").style.transform = "scale(1.2)";
}

function picZoomOut() {
  document.getElementById("pic").style.transform = "scale(1.0)";
}

1.3 完整示例

<!DOCTYPE html>
<html>
<head>
  <title>放大缩小实例</title>
  <style>
    img {
      transition: transform 0.5s;
    }
  </style>
  <script>
    function picZoomIn() {
      document.getElementById("pic").style.transform = "scale(1.2)";
    }

    function picZoomOut() {
      document.getElementById("pic").style.transform = "scale(1.0)";
    }
  </script>
</head>
<body>
  <img src="picture.jpg" width="400" id="pic" onmouseenter="picZoomIn()" onmouseleave="picZoomOut()">
</body>
</html>

2. 滑动淡入实例

该实例可以实现在页面加载时淡入效果以及滑动效果，具体步骤如下：

2.1 设置默认样式

首先在CSS中设置淡入元素的默认状态，即透明度为0，位置为元素所在位置：

.fade-in {
  opacity: 0;
  position: relative;
  top: 20px;
}

2.2 设置动画效果

在CSS中添加动画效果：

.fade-in {
  opacity: 0;
  position: relative;
  top: 20px;
  animation: fade-in 0.9s ease forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    top: 20px;
  }
  to {
    opacity: 1;
    top: 0px;
  }
}

以上代码将实现淡入动画和滑动动画。

2.3 完整示例

<!DOCTYPE html>
<html>
<head>
  <title>淡入滑动实例</title>
  <style>
    /* 设置淡入默认样式 */
    .fade-in {
      opacity: 0;
      position: relative;
      top: 20px;
    }
    /* 设置动画效果 */
    .fade-in {
      opacity: 0;
      position: relative;
      top: 20px;
      animation: fade-in 0.9s ease forwards;
    }

    @keyframes fade-in {
      from {
        opacity: 0;
        top: 20px;
      }
      to {
        opacity: 1;
        top: 0px;
      }
    }
  </style>
</head>
<body>
  <!-- 淡入效果 -->
  <h1 class="fade-in">Hello, World!</h1>
  <!-- 滑动效果 -->
  <p class="fade-in">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis enim nulla, ut suscipit orci luctus vel. Mauris commodo quam eu tincidunt finibus. Cras rutrum augue vel eros luctus, vel auctor risus dignissim. Fusce id vestibulum urna. Vestibulum id tellus aliquet, tincidunt magna ac, rhoncus quam. Aenean ac dolor sed ex lacinia sollicitudin. Sed convallis odio ut eros euismod feugiat.</p>
</body>
</html>

以上就是放大缩小和滑动淡入的示例，通过这些基础运动效果，我们可以进一步实现更加丰富的网站动画效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript运动效果实例总结(放大缩小、滑动淡入、滚动) - Python技术站