jQuery | Complemento de placa parpadeante

jQuery proporciona el complemento Flickerplate que ayuda a nuestros programadores a crear controles deslizantes para sitios web que pueden recorrer una lista de imágenes de fondo junto con la función de navegación de puntos y flechas animadas. El complemento consta de muchas más bibliotecas que son responsables de las detecciones táctiles y eventos, como la biblioteca personalizada Modernizr y jQuery Finger . Con la ayuda de este complemento, el programador puede crear y diseñar controles deslizantes efectivos en aplicaciones modernas que pueden desplazarse fácilmente por el contenido web.

Nota: descargue el complemento jQuery Flickerplate en su carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código, como se muestra a continuación.

Incluya los archivos requeridos para el plugin de flickerplate:

<link href=”flickerplate.css” rel=”stylesheet” type=”text/css”/>
<script src=”flickerplate.min.js”></script>

<script src=”jquery-v1.10.2.min.js”></script>
<script src=”modernizr-custom-v2.7.1.min.js”></script>
<script src=”jquery-finger -v0.1.0.min.js”></secuencia de comandos>

Ejemplos 1: el complemento Flickerplate se ejecuta mediante javascript y se puede utilizar al contener la clase del código HTML diseñado para la interfaz de usuario. El siguiente código de ejemplo demuestra la simple llamada de la función flicker() del complemento.

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>jQuery Flickerplate Plugin </title>
  
    <style>
        html {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #ffffff;
            font-weight: 200;
        }
  
        body {
            margin: 0px;
            top: 0px;
            padding: 0px;
            bottom: 0px;
        }
    </style>
  
    <!--Required javascript-->
    <script src="jquery-v1.10.2.min.js" 
            type="text/javascript">
    </script>
  
    <script src="modernizr-custom-v2.7.1.min.js" 
            type="text/javascript">
    </script>
  
    <script src="jquery-finger-v0.1.0.min.js" 
            type="text/javascript">
    </script>
  
    <!--Include flickerpate files-->
    <link href="flickerplate.css" 
            type="text/css" rel="stylesheet">
              
    <script src="flickerplate.min.js" 
            type="text/javascript">
    </script>
  
    <script>
        $(document).ready(function () {
            $('.flicker-example').flicker();
        });
    </script>
</head>
  
<body>
    <div class="flicker-example" data-block-text="false">
        <ul>
            <li data-background="images/bgImage3.jpg">
                <div class="flick-title" style="color:black">
                    Write from home
                </div>
                <div class="flick-sub-text" style="color:black">
                    When the whole nation is on the verge of
                    lockdown due to COVID-19 pandemic and all
                    Geeks across the country have to stay 
                    indoors,how would it be if you can use
                    this free time to sharpen your skills?
                </div>
            </li>
  
            <li data-background="images/bgImage1.jpg">
                <div class="flick-title" style="color:black">
                    Get your dream job
                </div>
                <div class="flick-sub-text" style="color:black">
                    As the placement season is back so are we
                    to help you ace the interview. We have 
                    selected some most commonly asked and 
                    must do practice problems for you.
                </div>
            </li>
  
            <li data-background="images/bgImage2.jpg">
                <div class="flick-title" style="color:#000000">
                    Must do coding questions
                </div>
                <div class="flick-sub-text" style="color:#000000">
                    We have selected some most commonly asked
                    and must do practice problems for you. You 
                    can also take part in our mock placement 
                    contests which will help you learn different
                    topics and practice at the same time, 
                    simulating the feeling of a real placement 
                    test environment.
                </div>
            </li>
        </ul>
    </div>
</body>
  
</html>

Nota: En el código HTML anterior, el texto del bloque de datos se establece en «falso» para eliminar el bloque de cuadro alrededor del título y el subtexto proporcionado por el programador.

Producción:

Ejemplo 2: el complemento Flickerplate es fácilmente configurable y se puede hacer de diferentes maneras, como configurar opciones en el código jQuery o configurar atributos de datos en el elemento real de la página. En el siguiente ejemplo, observe las opciones establecidas en la parte del script y los comentarios escritos. El usuario puede entenderlo relacionándolo con la imagen de salida que se muestra a continuación.

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>jQuery Flickerplate Plugin </title>
  
    <style>
        html {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #ffffff;
            font-weight: 200;
        }
  
        body {
            margin: 0px;
            top: 0px;
            padding: 0px;
            bottom: 0px;
        }
    </style>
  
    <!--Required javascript-->
    <script src="jquery-v1.10.2.min.js" 
        type="text/javascript">
    </script>
  
    <script src="modernizr-custom-v2.7.1.min.js" 
        type="text/javascript">
    </script>
      
    <script src="jquery-finger-v0.1.0.min.js" 
        type="text/javascript">
    </script>
  
    <!--Include flickerpate files-->
    <link href="flickerplate.css" type="text/css"
                             rel="stylesheet" />
                               
    <script src="flickerplate.min.js" 
        type="text/javascript">
    </script>
    <!--To make flicker touch enabled-->
    <script src="hammer-v2.0.3.min.js" 
        type="text/javascript">
    </script>
  
    <script>
        $(document).ready(function () {
            $('.flicker-example').flicker({
  
                // Traverse back and forth
                // between flicks
                arrows: true,
  
                // Set background colour to text
                block_text: true,
  
                // Set auto slide on load
                auto_flick: true,
  
                // Set time delay between 2 flicks
                auto_flick_delay: 2,
                  
                // Pressing the next arrow will
                // get you to beginning
                arrowsConstraint: false,
  
                // Sets the starting flick
                // to 2nd navigation dot
                flick_position: 2,
  
                // Enable the dot navigation
                dot_navigation: true, 
  
                // Dot navigation is set in the left side
                dot_alignment: 'left',
  
                // Darkens the navigation dot
                theme: 'dark',
  
                // Set the type of animation
                flick_animation: 'transition-slide'
            });
        });
    </script>
</head>
  
<body>
    <div class="flicker-example" data-block-text="false">
        <ul>
            <li data-background="images/bgImage3.jpg">
  
                <div class="flick-title" style="color:black">
                    Write from home
                </div>
                <div class="flick-sub-text" style="color:black">
                    When the whole nation is on the verge of 
                    lockdown due to COVID-19 pandemic and all 
                    Geeks across the country have to stay indoors,
                    how would it be if you can use this free 
                    time to sharpen your skills?
                </div>
            </li>
  
            <li data-background="images/bgImage1.jpg">
                <div class="flick-title" style="color:black">
                    Get your dream job
                </div>
                <div class="flick-sub-text" style="color:black">
                    As the placement season is back so are we 
                    to help you ace the interview. We have 
                    selected some most commonly asked
                    and must do practice problems for you.
                </div>
            </li>
  
            <li data-background="images/bgImage2.jpg">
                <div class="flick-title" style="color:#000000">
                    Must do coding questions
                </div>
                <div class="flick-sub-text" style="color:#000000">
                    We have selected some most commonly asked
                    and must do practice problems for you. You 
                    can also take part in our mock placement
                    contests which will help you learn different 
                    topics and practice at the same time, 
                    simulating the feeling of a real placement 
                    test environment.
                </div>
            </li>
        </ul>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *