如何使用jQuery创建一个新闻标签

如何使用jQuery创建一个新闻标签

一个新闻标签是一个基于文本的显示,可以是图形的形式,显示从上到下或从右到左滚动的新闻文本。在这篇文章中,我们将使用一个名为easy-ticker的jQuery插件,以简单的方式创建一个新闻滚动条。

要使用这个插件,只需在你的HTML代码的脚本标签中添加CDN链接。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-easy-ticker/2.0.0/jquery.easy-ticker.min.js”></script>·

让我们看看HTML代码,以了解我们如何使用easy-ticker插件创建一个新闻标签。

<!DOCTYPE HTML>
<html>
  
<head>
    <title>News Ticker Effect</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-easy-ticker/2.0.0/jquery.easy-ticker.min.js">
    </script>
  
    <style>
        .dashboard {
            background-color: green;
            width: 600px;
            height: 350px;
            border: 3px solid black;
            overflow: hidden;
            border-radius: 15px;
            margin: 0px auto;
        }
  
        ul {
            margin: 1px;
            padding: 1px;
        }
  
        li {
            text-align: justify;
            border-bottom: 2px solid blue;
        }
  
        h1 {
            color: red;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h1>GFG COURSES</h1>
    <div class="dashboard">
        <ul id="news">
            <li>
                <h1>Android App with Kotlin</h1>
                <p>
                    This course will begin from the 
                    basics of Android Development and
                    will take you to a level where 
                    you can make full fledged Android 
                    apps. It covers things like UI 
                    building, Kotlin programming,
                    communicating between different 
                    screens of an app,implementing 
                    static and dynamic custom lists, 
                    working with databases ,fetching 
                    data from the internet using REST 
                    APIs, using various important 
                    libraries and working with local 
                    device storage.
                </p>
            </li>
  
            <li>
                <h1>
                    Data Structure and Algorithm self paced
                </h1>

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery插件