Bagaimana untuk mencapai pembesaran imej dengan css

Dengan populariti Internet dan peranti mudah alih, imej dalam halaman web dan apl telah menjadi elemen yang sangat diperlukan. Tetapi apakah yang perlu kita lakukan apabila kita perlu membesarkan imej ke tahap tertentu? Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan pembesaran imej.

1. Konsep asas

Untuk mencapai kesan pembesaran imej, kita perlu memahami dua sifat CSS berikut:

1. atribut transformasi: digunakan untuk memutar elemen , penskalaan, pergerakan dan operasi transformasi lain.
2. Atribut peralihan: digunakan untuk mentakrifkan kesan peralihan unsur daripada satu keadaan ke keadaan lain, seperti fade in dan fade out, putaran, dsb.

2. Pelaksanaan asas

1. Kesan pembesaran

Berikut ialah coretan kod HTML yang ringkas, termasuk imej dan butang:

    <img src="sample.jpg" class="pic" />
    <button onclick="enlarge()">Enlarge</button>

Antaranya, kelas gambar ialah pic, dan fungsi yang dipanggil oleh butang ialah enlarge(). Seterusnya, kita boleh mencapai kesan pembesaran imej melalui CSS:

    .pic {
        transition: all 0.3s;
    }

    .enlarge {
        transform: scale(1.5);
    }

Dalam gaya CSS .pic, kita mentakrifkan kesan peralihan 0.3 saat, supaya apabila imej dibesarkan, akan ada Smooth peralihan. Dalam kelas .enlarge, kami menggunakan atribut transform dan menetapkan nisbah pembesaran imej kepada 1.5 kali. Sekarang, kita hanya perlu mentakrifkan fungsi enlarge() dalam JavaScript untuk menambah kelas .enlarge pada imej apabila butang diklik:

    function enlarge() {
        document.querySelector('.pic').classList.add('enlarge');
    }

Dengan cara ini, apabila kita mengklik butang, imej akan diperbesarkan. Jika kita perlu memulihkan saiz imej, kita boleh mentakrifkan fungsi shrink() dalam JavaScript dan biarkan ia mengalih keluar kelas .enlarge:

    function shrink() {
        document.querySelector('.pic').classList.remove('enlarge');
    }

2. Besarkan dan gerakkan kesan

Jika kita perlu membesarkan gambar dan melakukan operasi terjemahan padanya pada masa yang sama, bagaimana kita harus mencapainya? Pada masa ini, kita perlu menggunakan fungsi translate() dalam transform. Berikut ialah kod sampel:

    .move {
        transform: scale(1.5) translate(20px, 20px);
    }

Dalam contoh ini, kami masih menggunakan fungsi skala() untuk membesarkan imej, tetapi pada masa yang sama menggabungkannya dengan fungsi translate() untuk menggerakkan imej 20 ke piksel kanan bawah. Menggunakan kaedah ini, kita boleh mencapai kesan pembesaran dan gambar bergerak dengan mudah.

3. Kes Praktikal

Selain kesan penguatan asas, kami juga boleh menggabungkan atribut CSS lain untuk mencapai kesan imej yang lebih kaya. Berikut ialah beberapa kes praktikal:

1. Topeng Pembesaran Gambar

Dalam kes ini, kami menggunakan unsur pseudo untuk mencapai kesan topeng hitam, dan kemudian besarkan gambar Letakkannya di bawah topeng untuk mencipta kesan visual. Kod sampel adalah seperti berikut:

    <div class="wrapper">
        <img src="sample.jpg" class="pic" />
        <div class="mask"></div>
    </div>

    .wrapper {
        position: relative;
        display: inline-block;
    }

    .pic {
        transition: all 0.3s;
        display: block;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .wrapper:hover .mask {
        opacity: 1;
    }

    .wrapper:hover .pic {
        transform: scale(1.2);
    }

Dalam kod di atas, kami menggunakan elemen pseudo untuk mencipta topeng dan mencapai kesan pudar topeng melalui atribut kelegapan. Untuk operasi pembesaran imej, hanya gunakan atribut transform secara langsung dalam kelas pseudo :hover. Akhir sekali, kita perlu menetapkan .wrapper kepada inline-block supaya imej dan mask berbaris dengan betul.

2. Lakaran kecil pembesaran imej

Dalam sesetengah tapak web e-dagang, kita sering melihat satu set lakaran kecil Apabila kita mengklik pada salah satu imej, Ini akan melompat ke a halaman baharu yang menunjukkan versi imej yang lebih besar. Bagaimana jika kita mahu memaparkan versi halaman semasa yang diperbesarkan?

Dalam kes ini, kami boleh menambah versi yang dibesarkan bagi setiap lakaran kenit, dan kemudian menggunakan CSS untuk meletakkan versi yang dibesarkan ini pada kedudukan yang sama untuk mencapai kesan pembesaran. Kod sampel adalah seperti berikut:

    <div class="wrapper">
        <img src="thumb1.jpg" class="thumbnail" data-large="large1.jpg" />
        <img src="thumb2.jpg" class="thumbnail" data-large="large2.jpg" />
        <img src="thumb3.jpg" class="thumbnail" data-large="large3.jpg" />
        <img src="thumb4.jpg" class="thumbnail" data-large="large4.jpg" />

        <div class="enlarge"></div>
    </div>

    .wrapper {
        position: relative;
        display: inline-block;
    }

    .thumbnail {
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .enlarge {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: all 0.3s;
        z-index: -1;
    }

    .thumbnail:hover + .enlarge {
        transform: scale(1.5);
        opacity: 1;
        z-index: 1;
    }

Dalam contoh ini, kami menambah atribut data-large pada setiap lakaran kecil untuk menyimpan versi diperbesarkan yang sepadan. Kemudian, kami menentukan elemen .enlarge dalam HTML untuk memaparkan imej yang diperbesarkan. Dalam CSS, kami menetapkan z-index bagi elemen .enlarge kepada -1 supaya ia diletakkan di bawah lakaran kecil. Akhir sekali, apabila lakaran kecil dilegar, kita boleh meletakkan versi pembesaran yang sepadan pada kedudukan yang sama untuk mencapai kesan pembesaran.

4. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan CSS untuk mencapai kesan pembesaran imej. Sama ada pembesaran dan pergerakan asas, atau kes yang lebih kaya, ia boleh dicapai dengan mudah melalui atribut transformasi dan peralihan. Saya harap artikel ini dapat membantu anda mencapai hasil yang lebih baik dalam pembangunan web.

Atas ialah kandungan terperinci Bagaimana untuk mencapai pembesaran imej dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!