基于jquery的滚动新闻列表

最新推荐文章于 2022-11-05 20:27:52 发布

꧁༺摩༒西༻꧂

最新推荐文章于 2022-11-05 20:27:52 发布

阅读量1k

点赞数

博主原创，微信号：steve_frank。

本文链接：https://blog.csdn.net/steve_frank/article/details/8463627

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vTicker</title>
<style type="text/css" media="all">
body,html {
padding: 0;
margin: 0;
}

body {
background: #cccccc;
}

#news - container {
width: 400px;
margin: auto; margin - top : 10px;
border: 5px solid #333333;
}

#news - container ul li div {
border: 1px solid #aaaaaa;
background: #ffffff;
}
</style>
<script type="text/javascript" src="demo_files/jquery.js">
</script>
<script type="text/javascript" src="demo_files/jquery.vticker-min.js">
</script>
<script type="text/javascript">
$(function() {
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
$('#news-container1').vTicker({
speed: 700,
pause: 4000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
</script>
</head>

<body>
<div id="news-container1">
<ul>
<li>
新闻标题1
</li>
<li>
新闻标题2
</li>
<li>
新闻标题3
</li>
<li>
新闻标题4
</li>
<li>
新闻标题5
</li>
</ul>
</div>
<div style="overflow: hidden; position: relative; height: 24px;"
id="news-container">
<ul style="position: absolute; margin: 0pt; padding: 0pt; top: 0px;">
<li
style="margin: 0pt; padding: 0pt; height: 18px; display: list-item;">
<div>
4) 摩洛哥塞拉，艺术家在一场为流浪儿童募捐的马戏节目中表演
</div>
</li>
<li
style="margin: 0pt; padding: 0pt; height: 18px; display: list-item;">
<div>
1) 印度克什知自己的孩子在骚乱中丧生时痛不欲生
</div>
</li>
<li
style="margin: 0pt; padding: 0pt; height: 18px display: list-item;">
<div>
2) 昆明警方近日捣毁了寻甸县的“洪兴帮”黑恶势力团伙
</div>
</li>
<li style="margin: 0pt; padding: 0pt; height: 18px">
<div>
3) 湖北武汉汉口龙王庙景区观景平台上，市民聚集在江边观看两江洪峰过汉
</div>
</li>
</ul>
</div>
</body>
</html>

꧁༺摩༒西༻꧂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的滚动新闻列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
复制链接

扫一扫