HTML, CSS dan jQuery: Petua untuk mencapai kesan pengecutan imej-tutorial js-php.cn

HTML, CSS dan jQuery: Petua untuk mencapai kesan pengecutan imej

WBOY

Lepaskan： 2023-10-27 19:34:05

asal

1514 orang telah melayarinya

HTML, CSS dan jQuery: Petua untuk mencapai kesan pengecutan imej

HTML, CSS dan jQuery: Petua untuk melaksanakan kesan pengecutan imej

Dalam reka bentuk web moden, melaksanakan beberapa kesan khas yang hebat boleh menjadikan halaman web lebih menarik. Antaranya, kesan pengecutan imej sering digunakan untuk menyerlahkan kandungan penting pada halaman web. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencapai kesan pengecutan imej, dan memberikan contoh kod khusus.

Persediaan
Sebelum bermula, kita perlu menyediakan beberapa fail dan kod yang diperlukan. Mula-mula, buat fail HTML bernama index.html. Kemudian, buat folder bernama imej untuk menyimpan fail gambar. Dalam fail index.html, kami akan menggunakan CSS dan jQuery untuk melaksanakan kesan pengecutan imej.
Layout HTML
Dalam fail index.html, kita perlu mencipta bekas untuk meletakkan imej. Anda boleh menggunakan elemen div untuk bertindak sebagai bekas Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>图片缩小特效</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="image-container">
        <img src="images/image.jpg" alt="图片">
    </div>
</body>
</html>

Salin selepas log masuk

Gaya CSS
Untuk mencapai kesan pengecutan imej, kita perlu menggunakan CSS untuk mengawal saiz dan kesan animasi imej. . Dalam fail style.css, tambahkan kod berikut:

.image-container {
    width: 500px; /* 设置容器宽度 */
    height: 500px; /* 设置容器高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    position: relative; /* 为了让子元素绝对定位 */
}

.image-container img {
    width: 100%; /* 将图片宽度设置为容器宽度 */
    height: auto; /* 根据图片比例自适应高度 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 图片相对于容器顶部位置 */
    left: 0; /* 图片相对于容器左侧位置 */
    transition: transform 0.5s; /* 添加动画过渡效果 */
}

.image-container img:hover {
    transform: scale(0.7); /* 当鼠标悬停时，缩小图片至原大小的70% */
}

Salin selepas log masuk

tindakan jQuery
Untuk mengawal kesan pengecutan imej dengan lebih baik, kami boleh menggunakan jQuery untuk mengendalikan acara leding tetikus. Cipta fail bernama script.js dan tambahkan kod berikut:

$(document).ready(function() {
    $(".image-container img").hover(
        function() {
            $(this).addClass("hovered"); /* 添加hovered类 */
        },
        function() {
            $(this).removeClass("hovered"); /* 移除hovered类 */
        }
    );
});

Salin selepas log masuk

Kesan Animasi CSS
Untuk menjadikan kesan pengecutan imej lebih lancar, kami boleh menambah beberapa kesan animasi CSS pada kelas .hovered. Ubah suai fail style.css dan tambah kod berikut:

.image-container img.hovered {
    transform: scale(0.7); /* 缩小图片至原大小的70% */
    transition: transform 0.5s; /* 添加过渡效果 */
}

Salin selepas log masuk

Demonstrasi Kesan
Simpan fail index.html, style.css dan script.js yang disediakan, dan buka fail index.html dalam penyemak imbas untuk melihat ke kesan di mana kesan pengurangan imej berlaku.

Melalui langkah di atas, kami menggunakan HTML, CSS dan jQuery untuk mencapai kesan pengecutan imej. Apabila tetikus dilegar di atas imej, imej akan dianimasikan untuk mengecil kepada 70% daripada saiz asalnya. Kesan khas ini bukan sahaja dapat menyerlahkan kandungan penting halaman web, tetapi juga meningkatkan pengalaman pengguna. Saya harap contoh kod dalam artikel ini akan membantu anda dan membolehkan anda melaksanakan pelbagai kesan halaman web yang hebat dengan mudah.

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Petua untuk mencapai kesan pengecutan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!