HTML, CSS 및 jQuery: 애니메이션 슬라이딩 창 만들기-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery: 애니메이션 슬라이딩 창 만들기

WBOY

풀어 주다： 2023-10-24 11:18:22

원래의

1106명이 탐색했습니다.

HTML, CSS 및 jQuery: 애니메이션 슬라이딩 창 만들기

HTML, CSS 및 jQuery: 애니메이션 효과로 슬라이딩 창 만들기

요즘 웹 디자인에서는 사용자 경험과 애니메이션 효과에 점점 더 많은 관심을 기울이고 있으며 간단한 코드를 사용하여 멋진 슬라이딩 창 효과를 만들 수 있습니다. 이 문서에서는 HTML, CSS 및 jQuery를 사용하여 애니메이션 효과가 포함된 슬라이딩 창을 만드는 방법을 소개하고 특정 코드 예제를 제공합니다.

먼저 HTML 구조를 만들고 필요한 CSS 스타일을 추가해야 합니다. 다음은 HTML 구조의 예입니다.

<!DOCTYPE html>
<html>
<head>
  <title>滑动窗口</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="slider-container">
    <div class="slider">
      <div class="slide">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="slide">
        <img src="image2.jpg" alt="Image 2">
      </div>
      <div class="slide">
        <img src="image3.jpg" alt="Image 3">
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

로그인 후 복사

다음으로 HTML 구조에 따라 해당 CSS 스타일을 추가합니다. 다음은 CSS 스타일의 예입니다.

.slider-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 300%;
  animation: slide 15s infinite;
}

.slide {
  flex: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}

로그인 후 복사

위 코드에서는 .slider-container 컨테이너를 만들어 슬라이딩 창의 콘텐츠를 래핑합니다. overflow:hidden을 설정하면 오버플로 부분의 내용을 숨길 수 있습니다. .slider는 슬라이딩 창의 주요 부분입니다. display: flex를 사용하여 모든 슬라이딩 요소를 한 행에 표시합니다. .slide는 이미지가 포함된 각 슬라이딩 요소에 대한 컨테이너입니다. flex: 1을 설정하면 각 슬라이딩 요소를 컨테이너 너비에 걸쳐 균등하게 배포할 수 있습니다. .slider-container容器，用于包裹滑动窗口的内容。通过设置overflow: hidden，我们可以隐藏溢出部分的内容。.slider是滑动窗口的主要部分，我们使用display: flex在一行中显示所有的滑动元素。.slide是每个滑动元素的容器，里面包含了一个图片。通过设置flex: 1，每个滑动元素可以平均分配容器的宽度。

接下来，我们使用jQuery来实现滑动动画效果。在script.js文件中添加以下代码：

$(document).ready(function() {
  $('.slider').hover(function() {
    $(this).stop();
  }, function() {
    $(this).animate({ 'margin-left': '-100%' }, 5000, function() {
      $(this).css('margin-left', '0');
    });
  });
});

로그인 후 복사

上述代码中，使用$(document).ready()确保文档加载完后执行代码。当鼠标悬停在滑动窗口上时，动画将停止。当鼠标移开后，滑动窗口将以5秒的动画时间向左滑动到下一张图片，并在最后一张图片后重新开始滑动。

最后，我们还需要创建一个style.css

다음으로 jQuery를 사용하여 슬라이딩 애니메이션 효과를 구현해 보겠습니다. script.js 파일에 다음 코드를 추가하세요:

body {
  margin: 0;
  padding: 0;
}

.slider-container {
  margin: 50px auto;
}

로그인 후 복사

위 코드에서 $(document).ready()를 사용하여 이후에 코드가 실행되는지 확인하세요. 문서가 로드되었습니다. 슬라이딩 창 위에 마우스를 올리면 애니메이션이 중지됩니다. 마우스를 제거하면 슬라이딩 창이 5초 애니메이션 시간으로 다음 그림으로 왼쪽으로 미끄러지고 마지막 그림 이후 다시 시작됩니다.

마지막으로 style.css 파일을 생성하고 이를 HTML에 도입하여 슬라이딩 창의 스타일을 설정해야 합니다. 파일에 다음 코드를 추가합니다. 🎜rrreee🎜위 코드를 사용하여 전체 문서의 여백과 패딩은 물론 슬라이딩 창 컨테이너의 외부 여백도 설정합니다. 🎜🎜위 내용은 애니메이션 효과가 있는 슬라이딩 창을 만드는 데 필요한 모든 코드 예제입니다. HTML, CSS 및 jQuery의 조합을 통해 멋진 슬라이딩 창 효과를 쉽게 얻을 수 있습니다. 실제 사용 시 필요에 따라 스타일과 상호 작용을 추가로 조정할 수 있습니다. 이 글이 모두에게 도움이 되기를 바랍니다! 🎜

위 내용은 HTML, CSS 및 jQuery: 애니메이션 슬라이딩 창 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!