Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk melaksanakan gelongsor skrin penuh dalam jquery
Bagaimana untuk melaksanakan gelongsor skrin penuh dalam jquery
- 王林asal
- 2023-05-18 13:52:38640semak imbas
Dalam reka bentuk tapak web moden, kesan gelongsor skrin penuh telah menjadi trend reka bentuk web yang semakin popular. Sebagai perpustakaan JavaScript yang digunakan secara meluas, jQuery juga menyediakan beberapa kaedah yang sangat mudah untuk mencapai kesan gelongsor skrin penuh. Dalam artikel ini, kami akan membincangkan cara untuk mencapai kesan gelongsor skrin penuh menggunakan jQuery.
Pertama, kita perlu menyediakan beberapa kod HTML dan CSS yang diperlukan. Untuk mencapai kesan gelongsor skrin penuh, kita perlu menambah berbilang halaman pada dokumen HTML, setiap halaman sepadan dengan ketinggian skrin. Pada masa yang sama, kita perlu menambah kelas CSS biasa pada halaman ini, seperti "bahagian", untuk menetapkan gaya biasa mereka.
Berikut ialah templat HTML dan CSS mudah untuk mencapai kesan gelongsor skrin penuh:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fullpage Sliding with jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section">
<h1>Section 1</h1>
</div>
<div class="section">
<h1>Section 2</h1>
</div>
<div class="section">
<h1>Section 3</h1>
</div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>rrreeDalam kod di atas, kami menetapkan gaya biasa dengan ketinggian 100% untuk halaman , menyatakan bahawa setiap Ketinggian halaman ialah ketinggian keseluruhan tetingkap. Kami juga menambah tiga elemen div pada halaman, masing-masing dengan nama kelas biasa "bahagian".
Seterusnya, kita perlu menggunakan jQuery untuk mencapai kesan gelongsor skrin penuh. Kita boleh menggunakan pemalam jQuery yang dipanggil fullpage.js untuk menyelesaikan tugas ini. fullpage.js ialah pemalam jQuery yang digunakan secara meluas, yang menyediakan banyak ciri yang memudahkan kesan gelongsor skrin penuh.
Pertama, kita perlu memperkenalkan fullpage.js dan fail gaya global fullpage.css ke dalam fail HTML:
html, body {
height: 100%;
margin: 0;
}
.section {
height: 100%;
}...
<link rel="stylesheet" href="fullpage.css">
</head>
<body>
<div class="section">
<h1>Section 1</h1>
</div>
<div class="section">
<h1>Section 2</h1>
</div>
<div class="section">
<h1>Section 3</h1>
</div>
<script src="jquery.js"></script>
<script src="fullpage.js"></script>
<script src="script.js"></script>
</body>
</html>Seterusnya, dalam fail JavaScript, kita perlu menggunakan fullpage.js pemalam untuk memulakan Tayangan Slaid skrin penuh:
... <link rel="stylesheet" href="fullpage.css"> <link rel="stylesheet" href="style.css"> </head> <body> ...
Kod JavaScript lengkap adalah seperti berikut:
$(document).ready(function() {
$('#fullpage').fullpage();
});Kita perlu menggunakan pemalam fullpage.js dalam konteks setiap halaman. Oleh itu, kita perlu menambah ID pada setiap halaman supaya jQuery dapat mencarinya dengan mudah. Kami boleh mencapai ini dengan menambahkan ID pada setiap div kelas "bahagian":
$(document).ready(function() {
$('#fullpage').fullpage();
});Kini setelah kami menyediakan kod HTML, CSS dan JavaScript, halaman web kami boleh mencapai kesan gelongsor skrin penuh . Melalui langkah di atas, anda boleh mencapai kesan tayangan slaid halaman web dan menganggap setiap skrin sebagai sub-halaman halaman web.
Ringkasan: Tidak sukar untuk mencapai kesan gelongsor skrin penuh dalam jQuery, tetapi anda perlu membuat beberapa persediaan. Kami perlu menyediakan beberapa kod HTML dan CSS yang diperlukan dan menggunakan pemalam fullpage.js untuk memulakan tayangan slaid skrin penuh. Anda juga perlu menetapkan ID setiap div kelas "bahagian" supaya jQuery boleh mencarinya. Dengan cara ini kita boleh melaksanakan halaman web dengan kesan gelongsor skrin penuh.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan gelongsor skrin penuh dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!