Rumah >hujung hadapan web >tutorial js >jquery mencipta mesej gesaan lapisan pop timbul yang cantik effects_jquery

jquery mencipta mesej gesaan lapisan pop timbul yang cantik effects_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal: 2016-05-16 16:24:441453semak imbas

Hari ini saya membawakan anda mesej gesaan lapisan pop timbul berdasarkan jquery. Halaman contoh ini dimulakan dengan butang pergi. Apabila butang pergi diklik, lapisan pop timbul gesaan bernyawa. Paparannya adalah seperti berikut:

Kod pelaksanaan.

kod html:

Salin kod Kod adalah seperti berikut:

           $('#go').klik(fungsi () {
               pergi (50);
});
          $('#ok').klik(fungsi () {
               go(500);
});
setTimeout(fungsi () {
               pergi (50);
}, 700);
setTimeout(fungsi () {
               go(500);
}, 2000);
fungsi go(nr) {
                 $('.bb').fadeToggle(200);
                 $('.message').toggleClass('comein');
                 $('.check').toggleClass('scaledown');
                $('#go').fadeToggle(nr);
}
//@ sourceURL=pen.js

kod css:

Salin kod

Kod adalah seperti berikut:

  badan, html

        {

            ketinggian: 100%;

            saiz fon: 20px;

            font-family: Source Sans Pro;

        }

        .b, .bb

        {

            jawatan: mutlak;

            lebar: 100%;

            ketinggian: 100%;

            latar belakang: url("kje4L5j.jpg");

            lampiran latar belakang: tetap;

            saiz latar belakang: penutup;

            kedudukan latar belakang: tengah;

        }

        .bb

        {

            latar belakang: url("bDBs0et.jpg");

            lampiran latar belakang: tetap;

            saiz latar belakang: penutup;

            kedudukan latar belakang: tengah;

            paparan: tiada;

        }

        #pergi

        {

            jawatan: mutlak;

            atas: 30px;

            kiri: 50%;

            ubah: terjemah(-50%, 0%);

            warna: putih;

            sempadan: 0;

            latar belakang: #71c341;

            lebar: 100px;

            ketinggian: 30px;

            jejari sempadan: 6px;

            saiz fon: 1rem;

            peralihan: latar belakang 0.2s mudah;

            garis besar: tiada;

        }

        #go:hover

        {

            latar belakang: #8ecf68;

        }

        #go:active

        {

            latar belakang: #5a9f32;

        }

        .mesej

        {

            jawatan: mutlak;

            atas: -200px;

            kiri: 50%;

            ubah: terjemah(-50%, 0%);

            lebar: 300px;

            latar belakang: putih;

            jejari sempadan: 8px;

            pelapik: 30px;

            penjajaran teks: tengah;

            berat fon: 300;

            warna: #2c2928;

            kelegapan: 0;
            peralihan: atas 0.3s cubic-bezier(0.31, 0.25, 0.5, 1.5), kelegapan 0.2s kemudahan-keluar;

        }

        .mesej .semak

        {

            jawatan: mutlak;

            atas: 0;

            kiri: 50%;

            ubah: terjemah(-50%, -50%) skala(4);

            lebar: 120px;

            ketinggian: 110px;

            latar belakang: #71c341;

            warna: putih;

            saiz fon: 3.8rem;

            padding-top: 10px;

            jejari sempadan: 50%;

            kelegapan: 0;

            peralihan: ubah 0.2s 0.25s cubic-bezier(0.31, 0.25, 0.5, 1.5), kelegapan 0.1s 0.25s kemudahan-keluar;

        }

        .mesej .penurunan skala

        {

            ubah: terjemah(-50%, -50%) skala(1);

            kelegapan: 1;

        }

        .mesej p

        {

            saiz fon: 1.1rem;

            jidar: 25px 0px;

            pelapik: 0;

        }

        .mesej p:nth-child(2)

        {

            saiz fon: 2.3rem;

            jidar: 40px 0px 0px 0px;

        }

        .mesej #ok

        {

            jawatan: relatif;

            warna: putih;

            sempadan: 0;

            latar belakang: #71c341;

            lebar: 100%;

            ketinggian: 50px;

            jejari sempadan: 6px;

            saiz fon: 1.2rem;

            peralihan: latar belakang 0.2s mudah;

            garis besar: tiada;

        }

        .message #ok:hover

        {

            latar belakang: #8ecf68;

        }

        .mesej #ok:aktif

        {

            latar belakang: #5a9f32;

        }

        .masuk

        {

            atas: 150px;

            kelegapan: 1;

        }

以上就是基于jQuery制作的漂亮的弹出层提示特效的全部代码了，非常的漂亮听他，亮听，他们使用到自己的项目中去。

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Koleksi jQuery front-end skills_jquery yang biasa digunakanArtikel seterusnya：Koleksi jQuery front-end skills_jquery yang biasa digunakan

Artikel berkaitan

Lihat lagi