js图片特效代码大全

JavaScript 图片特效可以通过操作 DOM 元素和 CSS 样式来实现各种视觉效果。以下是一些常见的图片特效及其示例代码：

1. 图片淡入淡出效果

概念：通过逐渐改变图片的透明度来实现淡入淡出的效果。

应用场景：网站背景切换、图片轮播等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片淡入淡出</title>
<style>
  #image {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
</style>
</head>
<body>
<img id="image" src="your-image.jpg" alt="Sample Image">
<script>
  function fadeInOut() {
    const img = document.getElementById('image');
    let opacity = 0;
    const timer = setInterval(() => {
      if (opacity >= 1) {
        clearInterval(timer);
        setTimeout(() => {
          let fadeOutOpacity = 1;
          const fadeOutTimer = setInterval(() => {
            if (fadeOutOpacity <= 0) {
              clearInterval(fadeOutTimer);
              fadeInOut();
            }
            img.style.opacity = fadeOutOpacity;
            fadeOutOpacity -= 0.05;
          }, 50);
        }, 3000);
      }
      img.style.opacity = opacity;
      opacity += 0.05;
    }, 50);
  }
  fadeInOut();
</script>
</body>
</html>

2. 图片旋转效果

概念：使图片围绕其中心点旋转。

应用场景：动画背景、加载指示器等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片旋转</title>
<style>
  #rotatingImage {
    animation: rotation 5s infinite linear;
  }
  @keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
  }
</style>
</head>
<body>
<img id="rotatingImage" src="your-image.jpg" alt="Rotating Image">
</body>
</html>

3. 图片缩放效果

概念：通过改变图片的尺寸来实现缩放效果。

应用场景：图片点击放大查看、动态效果展示等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片缩放</title>
<style>
  #zoomImage {
    transition: transform 0.5s;
  }
  #zoomImage:hover {
    transform: scale(1.5);
  }
</style>
</head>
<body>
<img id="zoomImage" src="your-image.jpg" alt="Zoomable Image">
</body>
</html>

4. 图片滤镜效果

概念：应用 CSS 滤镜来改变图片的颜色或亮度等属性。

应用场景：艺术效果、黑白照片等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片滤镜</title>
<style>
  #filterImage {
    filter: grayscale(100%);
    transition: filter 0.5s;
  }
  #filterImage:hover {
    filter: grayscale(0%);
  }
</style>
</head>
<body>
<img id="filterImage" src="your-image.jpg" alt="Filterable Image">
</body>
</html>

5. 图片马赛克效果

概念：将图片分割成多个小块，并随机改变每个小块的颜色。

应用场景：创意展示、隐私保护等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片马赛克</title>
<style>
  .mosaic {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-size: cover;
    background-position: center;
  }
</style>
</head>
<body>
<div id="mosaicContainer"></div>
<script>
  function createMosaic(imageUrl, containerId, tileSize) {
    const container = document.getElementById(containerId);
    const img = new Image();
    img.src = imageUrl;
    img.onload = () => {
      const width = img.width;
      const height = img.height;
      for (let y = 0; y < height; y += tileSize) {
        for (let x = 0; x < width; x += tileSize) {
          const tile = document.createElement('div');
          tile.className = 'mosaic';
          tile.style.backgroundImage = `url(${imageUrl})`;
          tile.style.backgroundPosition = `-${x}px -${y}px`;
          container.appendChild(tile);
        }
      }
    };
  }
  createMosaic('your-image.jpg', 'mosaicContainer', 50);
</script>
</body>
</html>

这些示例展示了如何使用 JavaScript 和 CSS 来实现基本的图片特效。根据具体需求，可以进一步调整和扩展这些效果。

页面内容是否对你有帮助？

有帮助

没帮助