如何使用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>