JQuery——BreakingNews.js新闻滚动效果
以下是一个使用jQuery和BreakingNews.js实现的简单新闻滚动效果的示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻滚动效果</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path_to/BreakingNews.js"></script>
<style>
.breaking-news {
width: 500px;
height: 70px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="breaking-news">
<ul id="ticker01">
<li><a href="#">新闻1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#">新闻2: Vivamus eget tincidunt velit, eget facilisis mauris. </a></li>
<li><a href="#">新闻3: Sed velit nulla, luctus ut tempor vel, tempor at dui.</a></li>
<!-- 更多新闻项 -->
</ul>
</div>
<script>
$(document).ready(function(){
$('#ticker01').BreakingNews({
speed: 700,
breakGap: 2000
});
});
</script>
</body>
</html>确保替换path_to/BreakingNews.js为实际的BreakingNews.js文件路径。
这段代码会创建一个新闻滚动效果，其中.breaking-news是显示新闻的容器，#ticker01是包含新闻项的列表。jQuery和BreakingNews.js会被用来实现自动滚动的效果。你可以根据需要添加更多的新闻项。
评论已关闭