如何使用 jQuery easy ticker plugin 设计一个ticker？

在本文中，我们将了解jQuery easy ticker插件，它就像一个具有无限列表滚动功能的新闻自动收报机。它具有高度可定制性和灵活性，具有许多功能。

下载链接： https://github.com/vaakash/jquery-easy-ticker

注意：下载“jquery.easy-ticker.js”预编译文件以包含在以下代码中以使其工作。将库文件保存在您的工作文件夹中。

示例 1：以下代码演示了带有“向上”和“向下”按钮的插件，可以向上和向下滚动代码消息。

HTML

  

    
    
    
    
    
        .myTicker {
            border: 2px solid black;
            width: 600px;
        }
  
        .myTicker ul {
            padding: 0;
        }
  
        .myTicker li {
            list-style: none;
            border-bottom: 1px solid green;
            padding: 10px;
        }
    

  

    GeeksforGeeks
     jQuery easy Ticker plugin
    
    
  
    ADD
  
    UP
    DOWN
  
    Ticker 1
    
        
             (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.
            Web technology
            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.
            HTML
            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
        
    
  
    Ticker 2
    
        
             (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.
            Web technology
            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.
            HTML
            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
        
    
    
        $(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();
            });
        });
    

  

输出：

示例 2：以下代码演示了使用默认选项的回调函数，开发者可以根据需要进行自定义更改。

HTML

  

    
    
    
    
    
        .myTicker {
            border: 2px solid black;
            width: 600px;
        }
  
        .myTicker ul {
            padding: 0;
        }
  
        .myTicker li {
            list-style: none;
            border-bottom: 1px solid green;
            padding: 10px;
        }
    

  

    GeeksforGeeks
     jQuery easy Ticker plugin
    
    
  
    ADD
  
    UP
    DOWN
  
    Ticker 1
    
        
             (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.
            Web technology
            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.
            HTML
            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
        
    
  
    Ticker 2
    
        
             (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.
            Web technology
            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.
            HTML
            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
        
    
    
        $(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();
            });
        });
    

  

输出：