En este artículo, aprenderemos sobre el complemento jQuery easy ticker que actúa como un teletipo de noticias que tiene la facilidad de desplazamientos de lista infinitos. Es altamente personalizable y flexible con muchas características.
Enlace de descarga: https://github.com/vaakash/jquery-easy-ticker
Nota: Descargue el archivo precompilado «jquery.easy-ticker.js» para incluirlo en los siguientes códigos para su funcionamiento. Mantenga el archivo de la biblioteca en su carpeta de trabajo.
Ejemplo 1: el siguiente código muestra el complemento con los botones «arriba» y «abajo» que desplazan los mensajes de cotización hacia arriba y hacia abajo.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script type="text/javascript" src= "jquery.easy-ticker.js"> </script> <style> .myTicker { border: 2px solid black; width: 600px; } .myTicker ul { padding: 0; } .myTicker li { list-style: none; border-bottom: 1px solid green; padding: 10px; } </style> </head> <body> <h2 style="color:green">GeeksforGeeks</h2> <strong> jQuery easy Ticker plugin</strong> <br> <p></p> <button class="add">ADD</button> <button class="up">UP</button> <button class="down">DOWN</button> <h2>Ticker 1</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <h2>Ticker 2</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $('.myTicker').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: true, controls: { up: '.up', down: '.down' }, callbacks: { before: function (ul, li) { $(li).css('color', 'red'); }, after: function (ul, li) { $(li).css('color', 'blue'); } } }); addVar = 1; $('.add').click(function () { $('.myTicker ul').append( '<li>' + addVar + ':' + 'ADDED TEXT ' + 'As the placement season is back ' + 'GeeksforGeeks is here to help you ' + 'crack the interview</li>'); addVar++; }); var ticker = $('.myTicker') .easyTicker() .data('easyTicker'); $('.up').click(function () { ticker.up(); }); $('.down').click(function () { ticker.down(); }); }); </script> </body> </html>
Producción:
Ejemplo 2: el siguiente código demuestra el uso de funciones de devolución de llamada con opciones predeterminadas, los desarrolladores pueden realizar cambios personalizados según la necesidad.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script type="text/javascript" src="jquery.easy-ticker.js"> </script> <style> .myTicker { border: 2px solid black; width: 600px; } .myTicker ul { padding: 0; } .myTicker li { list-style: none; border-bottom: 1px solid green; padding: 10px; } </style> </head> <body> <h2 style="color:green">GeeksforGeeks</h2> <strong> jQuery easy Ticker plugin</strong> <br> <p></p> <button class="add">ADD</button> <button class="up">UP</button> <button class="down">DOWN</button> <h2>Ticker 1</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <h2>Ticker 2</h2> <div class="myTicker"> <ul> <li> (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.</li> <li>Web technology</li> <li>Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages.</li> <li>HTML</li> <li class="list-item">HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages</li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $('.myTicker').easyTicker({ direction: 'up', easing: 'swing', speed: 'slow', interval: 2000, height: 'auto', visible: 0, mousePause: true, controls: { up: '.up', down: '.down' }, callbacks: { before: function (ul, li) { $(li).css('color', 'red'); }, after: function (ul, li) { $(li).css('color', 'blue'); } } }); addVar = 1; $('.add').click(function () { $('.myTicker ul').append( '<li>' + addVar + ':' + 'ADDED TEXT ' + 'As the placement season is back ' + 'GeeksforGeeks is here to help you ' + 'crack the interview</li>' ); addVar++; }); var ticker = $('.myTicker') .easyTicker() .data('easyTicker'); $('.up').click(function () { ticker.up(); }); $('.down').click(function () { ticker.down(); }); }); </script> </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