Cara membuat kesan kaca pembesar di laman web

Pengarang: Virginia Floyd
Tarikh Penciptaan: 6 Ogos 2021
Tarikh Kemas Kini: 1 Julai 2024
Anonim
Cara Agar Aplikasi Tidak Mengulang Kembali Ketika Pindah APK Lain
Video.: Cara Agar Aplikasi Tidak Mengulang Kembali Ketika Pindah APK Lain

Kandungan

Memberi pelawat ke laman web anda peluang untuk melihat imej secara terperinci memerlukan sedikit manipulasi gambar-gambar ini. Menambah sedikit CSS, JavaScript dan jQuery kepada komposisi anda boleh membuat kesan kaca pembesar apabila penunjuk tetikus bergerak ke atas imej pada halaman anda. Kesan ini dicapai dengan membuat tingkap kecil yang memaparkan imej latar belakang apabila penunjuk tetikus bergerak ke atas imej yang dipaparkan di latar depan.


Arahan

Berikan pelawat ke laman web anda "close-up" imej (Brand X Pictures / Brand X Pictures / Getty Images)

  1. Sertakan JavaScript dan jQuery di bahagian "kepala" kod HTML dengan arahan:

    Dalam contoh ini, perpustakaan jQuery terletak dalam direktori HTML lalai.

  2. Masukkan tag CDATA untuk menghalang usaha penyemak imbas untuk mengurai pengendali jQuery:

  3. Tetapkan pembolehubah ketinggian dan lebar yang digunakan untuk memaparkan imej:

    var W = 743; var H = 1155; var w = 192; var h = 300;

  4. Tetapkan syarat-syarat yang memulakan fungsi pembesaran. Apabila dipanggil, fungsi ini menggantikan penunjuk tetikus dengan penonton pekeliling imej tertutup terbesar, apabila pengguna melayang ke atas imej yang lebih kecil yang ditunjukkan pada halaman. Buat contoh ini dengan kod:


    $ (document) .ready (function () {

    $ ("# myimage"). tetikus (fungsi (e) {$ (dokumen) .mousemove (myMM); $ ("# kaca") fadeIn ('cepat');

    });

  5. Tetapkan fungsi pembesaran dan parameter penstabilan. Dalam contoh ini, imej tersembunyi dibesarkan oleh dua kali saiz gambar yang lebih kecil, dan tingkap pembesaran akan hilang apabila penunjuk tetikus bergerak di luar batas gambar yang lebih kecil. Anda boleh melakukan ini dengan kod:

    fungsi myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); var kaca = $ ("# kaca"); var xs = e.pageX - myImage.offset (). kiri; var ys = e.pageY - myImage.offset (). atas; var bx = glassImage.width () / 2 - xsW / w; var oleh = glassImage.height () / 2 - ysH / h; glass.css ("kiri", e.pageX-75-89 + "px"). css ("atas", e.pageY-75-10 + "px"); glassImage.css ("kedudukan latar belakang", bx + "px" + oleh + "px"); jika (bx <-W || oleh <-H || bx> 150 || oleh> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('cepat'); }}


  6. Tutup jQuery "script" dan padam parser CDATA dengan arahan:

    // ]]>

  7. Tetapkan susun atur halaman dengan CSS untuk memposisikan imej latar belakang yang lebih besar dan tetingkap pembesaran bersempadan dengan kod:

    type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; kedudukan latar belakang: kiri atas; lebar: 250px; ketinggian: 170px; padding-top: 10px; padding-left: 89px; margin: 0; kedudukan: mutlak; paparan: tiada; } # glass-image {background-image: url ('myImageLarge.jpg'); lebar: 150px; ketinggian: 150px; jejari sempadan: 75px; -moz-border-radius: 75px; ulangi latar belakang: tidak ulangi; warna latar belakang: #fff; margin: 0; padding: 0; kursor: tiada; }

  8. Tulis kod HTML untuk memaparkan halaman dalam bahagian "badan":

    >

    Gerakkan tetikus ke atas imej

Bagaimana

  • Kod ini bergantung kepada CSS3 untuk membuat medan pembesaran pusingan dan mungkin tidak berfungsi di pelayar lama. Untuk keserasian ke belakang dengan pelaksanaan CSS yang lebih lama, tetapkan medan segi empat tepat untuk "# kaca-imej" (kaca pembesar).

Notis

  • Tanpa tag CDATA, pelayar cuba mengurai pengendali kurang daripada "<" dan lebih besar daripada ">" sebagai tag HTML. Sentiasa melibatkan pengendali JavaScript dan jQuery dengan tag CDATA untuk mengelakkan kegagalan "skrip".