HTML, CSS dan jQuery: Buat tetingkap gelongsor animasi-tutorial js-php.cn

HTML, CSS dan jQuery: Buat tetingkap gelongsor animasi

WBOY

Lepaskan： 2023-10-24 11:18:22

asal

1117 orang telah melayarinya

HTML, CSS dan jQuery: Buat tetingkap gelongsor animasi

HTML, CSS dan jQuery: Buat tetingkap gelongsor dengan kesan animasi

Kini, reka bentuk web memberi lebih banyak perhatian kepada pengalaman pengguna dan kesan animasi Dengan beberapa kod mudah, anda boleh mencipta Kesan tetingkap gelongsor yang hebat. Artikel ini akan memperkenalkan anda kepada cara menggunakan HTML, CSS dan jQuery untuk mencipta tetingkap gelongsor dengan kesan animasi dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta struktur HTML dan menambah gaya CSS yang diperlukan padanya. Berikut ialah contoh struktur 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>

Salin selepas log masuk

Seterusnya, kami menambah gaya CSS yang sepadan mengikut struktur HTML. Berikut ialah contoh gaya 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);
  }
}

Salin selepas log masuk

Dalam kod di atas, kami mencipta bekas .slider-container untuk membungkus kandungan tetingkap gelongsor. Dengan menetapkan overflow: hidden, kami boleh menyembunyikan kandungan bahagian limpahan. .slider ialah bahagian utama tetingkap gelongsor Kami menggunakan display: flex untuk memaparkan semua elemen gelongsor dalam satu baris. .slide ialah bekas untuk setiap elemen gelongsor, yang mengandungi imej. Dengan menetapkan flex: 1, setiap elemen gelongsor boleh diagihkan sama rata pada lebar bekas. .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');
    });
  });
});

Salin selepas log masuk

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

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

Seterusnya, kami menggunakan jQuery untuk melaksanakan kesan animasi gelongsor. Tambahkan kod berikut dalam fail script.js:

body {
  margin: 0;
  padding: 0;
}

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

Salin selepas log masuk

Dalam kod di atas, gunakan $(document).ready() untuk memastikan kod tersebut dilaksanakan selepas dokumen itu dimuatkan. Animasi akan berhenti apabila tetikus dilegar di atas tetingkap gelongsor. Apabila tetikus dialih keluar, tetingkap gelongsor akan meluncur ke kiri ke gambar seterusnya dengan masa animasi 5 saat, dan dimulakan semula selepas gambar terakhir.

Akhir sekali, kita juga perlu mencipta fail style.css dan memperkenalkannya ke dalam HTML untuk menetapkan gaya tetingkap gelongsor. Tambahkan kod berikut pada fail: 🎜rrreee🎜Dengan kod di atas, kami menetapkan jidar dan pelapik keseluruhan dokumen, serta jidar luar bekas tingkap gelangsar. 🎜🎜Di atas ialah semua contoh kod yang diperlukan untuk mencipta tetingkap gelongsor dengan kesan animasi. Melalui gabungan HTML, CSS dan jQuery, kami boleh mencapai kesan tetingkap gelongsor yang hebat dengan mudah. Dalam penggunaan sebenar, gaya lanjut dan pelarasan interaksi boleh dibuat mengikut keperluan anda sendiri. Semoga artikel ini bermanfaat kepada semua orang! 🎜

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Buat tetingkap gelongsor animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!