jquery menunjukkan video tersembunyi

Dalam era perkembangan pesat Internet, video telah menjadi bahagian yang amat diperlukan dalam kehidupan seharian manusia. Dalam pembinaan tapak web, jika anda ingin menggunakan video sebagai elemen paparan, cara untuk merealisasikan paparan dinamik dan penyembunyian video secara elegan adalah amat penting.

Dalam artikel ini, saya akan berkongsi dengan anda cara menggunakan jQuery untuk memaparkan dan menyembunyikan video.

Langkah pertama ialah memperkenalkan fail perpustakaan jQuery

Untuk menggunakan jQuery, anda perlu memperkenalkan fail perpustakaan jQuery terlebih dahulu ke dalam halaman web.

Jika anda tidak menggunakan jQuery dalam projek anda, anda boleh memuat turun fail perpustakaan jQuery dari tapak web rasmi jQuery https://jquery.com/.

Tambahkan kod berikut dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e:

<script src="path/to/jquery.min.js"></script>

Tukar laluan/ke/jquery.min.js kepada laluan fail yang sebenarnya anda muat turun.

Langkah kedua ialah merealisasikan fungsi menunjukkan dan menyembunyikan video

Seterusnya, kami akan menggunakan jQuery untuk merealisasikan kesan menunjukkan dan menyembunyikan video. Pelaksanaan khusus adalah seperti berikut:

1. Kod HTML

Dalam kod HTML, kita perlu menambah bekas (div) untuk memaparkan video dan menambah video dalam ia Teg, dan butang untuk diklik untuk menunjukkan/menyembunyikan video.

Kod khusus adalah seperti berikut:

<div class="video-container">
    <button class="show-video">显示视频</button>
    <video src="path/to/video.mp4"></video>
</div>

Antaranya, atribut src dalam teg video ialah laluan fail video, yang boleh diubah suai mengikut situasi sebenar.

2. Kod CSS

Seterusnya, kita perlu menambah beberapa gaya asas pada bekas video dan video supaya ia boleh dipaparkan pada halaman web.

Kod khusus adalah seperti berikut:

.video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.show-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border: 1px solid #333;
    outline: none;
}

Antaranya, .video-container ialah nama kelas bagi bekas video dan .show-video ialah nama kelas bagi butang untuk ditunjukkan /sembunyikan video. Gaya tertentu boleh diubah suai mengikut situasi sebenar.

3. kod jQuery

Akhir sekali, jQuery digunakan untuk mencapai kesan menunjukkan dan menyembunyikan video. Mula-mula kita perlu memilih butang untuk menunjukkan/menyembunyikan video dan menambah acara klik padanya.

Kod khusus adalah seperti berikut:

$('.show-video').click(function() {
    $(this).siblings('video').toggle();
});

Antaranya, $ mewakili elemen yang dipilih, .show-video mewakili elemen yang dipilih dengan nama kelas show-video dan .siblings(' video') mewakili elemen yang dipilih Untuk semua elemen video dalam elemen adik-beradik, .toggle() bermaksud menukar paparan dan keadaan tersembunyi elemen.

Apabila kami mengklik butang, jQuery mencari elemen video dalam elemen adik-beradik butang dan menukar keadaan paparan dan sembunyikannya. Ini mencapai kesan mengklik butang untuk menunjukkan/menyembunyikan video.

Kod jQuery yang lengkap adalah seperti berikut:

$(function() {
    $('.show-video').click(function() {
        $(this).siblings('video').toggle();
    });
});

Langkah ketiga, ringkasan

Melalui langkah di atas, kami telah berjaya menggunakan jQuery untuk memaparkan dan menyembunyikan video secara dinamik. Cuma tambahkan acara klik mudah untuk membolehkan pengguna memilih sama ada untuk menonton video.

Sudah tentu, dalam aplikasi sebenar, kami juga boleh menambah lebih banyak kesan dan interaksi untuk meningkatkan pengalaman pengguna. Contohnya: apabila video sedang dimainkan, anda boleh menambah fungsi seperti bar kemajuan dan main balik skrin penuh, dan menambah animasi pemuatan apabila video sedang dimuatkan, dsb.

Saya percaya bahawa melalui kajian artikel ini, pembaca telah menguasai kaedah asas untuk memaparkan dan menyembunyikan video dalam jQuery, dan berharap dapat mempraktikkan dan menambah baiknya dalam projek sebenar.

Atas ialah kandungan terperinci jquery menunjukkan video tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!