jquery crée un magnifique message d'invite de couche contextuelle effect_jquery

Aujourd'hui, je vous propose un message d'invite de couche contextuelle sympa basé sur jquery. Cette page d'exemple s'initialise avec un bouton Go. Lorsque vous cliquez sur le bouton Aller, la couche contextuelle d'invite s'anime. Le rendu est le suivant :

Code d'implémentation.

code html :

Copier le code Le code est le suivant :

        ALLER

          

              ✔
                                                                                                                                                                      Succès
                                                                                                                                                                                    Vérifiez votre courrier électronique pour une confirmation de réservation. À bientôt !
                                                                                         
D'accord
        

<script><br>            $('#go').click(function () {<br>                go(50);<br>         });<br> ​​​​ $('#ok').click(function() {<br>                go(500);<br>         });<br> setTimeout (fonction () {<br>                go(50);<br> }, 700);<br> setTimeout (fonction () {<br>                go(500);<br> }, 2000);<br> fonction go(n°) {<br>                  $('.bb').fadeToggle(200);<br>                   $('.message').toggleClass('comein');<br>                 $('.check').toggleClass('scaledown');<br>                 $('#go').fadeToggle(nr);<br> ><br> ​​​​ //@ sourceURL=pen.js<br> </script>



code css :

Copier le code

Le code est le suivant :

  corps, html
        {
            hauteur : 100%;
            taille de police : 20 px ;
            famille de polices : Source Sans Pro ;
        >
        .b, .bb
        {
            position : absolue ;
            largeur : 100 % ;
            hauteur : 100%;
            arrière-plan : url("kje4L5j.jpg");
            pièce jointe d'arrière-plan : corrigé ;
            taille du fond : couverture ;
            position d'arrière-plan : centre ;
        >
        .bb
        {
            arrière-plan : url("bDBs0et.jpg");
            pièce jointe d'arrière-plan : corrigé ;
            taille du fond : couverture ;
            position d'arrière-plan : centre ;
            affichage : aucun ;
        >
        #allez
        {
            position : absolue ;
            haut : 30px ;
            gauche : 50%;
            transformer : traduire (-50 %, 0 %);
            couleur : blanc ;
            bordure : 0;
            arrière-plan : #71c341;
            largeur : 100 px ;
            hauteur : 30px ;
            rayon de bordure : 6 px ;
            taille de police : 1rem;
            transition : facilité d'arrière-plan 0,2 s ;
            contour : aucun ;
        >
        #go:survoler
        {
            arrière-plan : #8ecf68;
        >
        #go:actif
        {
            arrière-plan : #5a9f32;
        >
        .message
        {
            position : absolue ;
            haut : -200px ;
            gauche : 50%;
            transformer : traduire (-50 %, 0 %);
            largeur : 300 px ;
            fond : blanc ;
            rayon de bordure : 8 px ;
            remplissage : 30 px ;
            text-align: center;
            poids de la police : 300 ;
            couleur : #2c2928;
            opacité : 0 ;
            transition : top 0,3 s cube-bézier (0,31, 0,25, 0,5, 1,5), opacité 0,2 s, facilité d'entrée et de sortie ;
        >
        .message .check
        {
            position : absolue ;
            haut : 0 ;
            gauche : 50%;
            transformer : traduire (-50 %, -50 %) échelle (4);
            largeur : 120 px ;
            hauteur : 110px ;
            arrière-plan : #71c341;
            couleur : blanc ;
            taille de police : 3,8rem ;
            rembourrage supérieur : 10 px ;
            rayon de bordure : 50 % ;
            opacité : 0 ;
            transition : transformation 0,2s 0,25s cube-bézier (0,31, 0,25, 0,5, 1,5), opacité 0,1s 0,25s facilité d'entrée-sortie ;
        >
        .message .scaledown
        {
            transformer : traduire (-50 %, -50 %) échelle (1);
            opacité : 1 ;
        >
        .messagep
        {
            taille de police : 1.1rem ;
            marge : 25px 0px;
            remplissage : 0 ;
        >
        .message p:ntième-enfant(2)
        {
            taille de police : 2,3rem ;
            marge : 40px 0px 0px 0px ;
        >
        .message #ok
        {
            position : relative ;
            couleur : blanc ;
            bordure : 0;
            arrière-plan : #71c341;
            largeur : 100 % ;
            hauteur : 50px ;
            rayon de bordure : 6 px ;
            taille de police : 1,2rem ;
            transition : facilité d'arrière-plan 0,2 s ;
            contour : aucun ;
        >
        .message #ok:survol
        {
            arrière-plan : #8ecf68;
        >
        .message #ok:actif
        {
            arrière-plan : #5a9f32;
        >
        .viens
        {
            haut : 150 px ;
            opacité : 1 ;
        >

Les utilisateurs de jQuery ont des problèmes avec jQuery.直接使用到自己的项目中去。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn