【子比】滚动式公告美化框-330B模板网

来源：初晨之家

可设置文章、文字广告、公告

内容：原来的5条（+5条副本=共10条）
容器高度：90px（只显示前2条，其他隐藏在下方）
每条高度：45px（2条×45px=90px）
动画：20秒滚动前5条，然后副本接上实现无缝循环

现在视觉上只看到2条，但滚动时会陆续展示第3、4、5条，然后回到第1条。这个是横着自己可以设置宽度，带日期版本的

主内容区（带日期）：

<div class="mini-scroll-widget">
<style>
.mini-scroll-widget {
background: #fff;
border: 1px solid #ddd;
border-radius: 16px;
padding: 20px;
font-family: "Microsoft YaHei", Arial, sans-serif;
margin-bottom: 20px;
}

.mini-scroll-widget .scroll-title {
font-size: 16px;
color: #333;
border-bottom: 2px solid #2b6cb0;
padding-bottom: 10px;
margin: 0 0 15px 0;
font-weight: 600;
}

.mini-scroll-widget .news-box {
height: 90px; /* 只显示2条的高度 */
overflow: hidden;
background: #f7fafc;
border-radius: 12px;
position: relative;
}

.mini-scroll-widget .news-list {
margin: 0;
padding: 0;
list-style: none;
animation: miniScroll 20s linear infinite; /* 5条内容滚动稍慢 */
will-change: transform;
}

.mini-scroll-widget .news-box:hover .news-list {
animation-play-state: paused;
}

@keyframes miniScroll {
0% {transform: translateY(0);}
100% {transform: translateY(-50%);} /* 滚动一半（前5条） */
}

.mini-scroll-widget .news-item {
display: flex;
align-items: center;
padding: 0 16px;
height: 45px; /* 每条固定45px */
border-bottom: 1px solid #e2e8f0;
font-size: 14px;
color: #555;
text-decoration: none;
transition: all 0.2s;
gap: 8px;
box-sizing: border-box;
}

.mini-scroll-widget .news-item:hover {
background: #ebf8ff;
color: #2b6cb0;
padding-left: 20px;
}

.mini-scroll-widget .news-item:before {
content: "•";
color: #2b6cb0;
font-weight: bold;
margin-right: 2px;
flex-shrink: 0;
}

.mini-scroll-widget .item-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

.mini-scroll-widget .date {
flex-shrink: 0;
color: #999;
font-size: 12px;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 10px;
font-family: Arial, sans-serif;
white-space: nowrap;
}

.mini-scroll-widget .news-box.hide-dates .date {
display: none !important;
}

.mini-scroll-widget .news-item.green-glow {
color: #059669;
text-shadow: 0 0 5px rgba(5, 150, 105, 0.3);
}

.mini-scroll-widget .news-item.green-glow:hover {
color: #047857;
text-shadow: 0 0 8px rgba(5, 150, 105, 0.5);
background: #f0fdf4;
}

.mini-scroll-widget .news-item.green-glow:before {
color: #10b981;
}

.mini-scroll-widget .view-more {
margin-top: 15px;
font-size: 13px;
text-align: right;
}

.mini-scroll-widget .view-more a {
color: #666;
text-decoration: none;
transition: all 0.2s;
padding: 4px 8px;
border-radius: 6px;
}

.mini-scroll-widget .view-more a:hover {
color: #2b6cb0;
background: #f1f5f9;
}
</style>

<h4 class="scroll-title">最新公告</h4>
<div class="news-box" id="miniWrap">
<ul class="news-list">
<!-- 第1条 -->
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<!-- 第2条 -->
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<!-- 第3条 -->
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<!-- 第4条 -->
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<!-- 第5条 -->
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
<!-- 无缝副本（必须与前5条完全一致） -->
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
</ul>
</div>
<div class="view-more"><a href="https://www.ccyuanma.com/" target="_blank">更多</a></div>

<script>
(function() {
var wrap = document.getElementById('miniWrap');
if (!wrap) return;

function checkDates() {
var items = wrap.querySelectorAll('.news-item');
var hasOverflow = false;

items.forEach(function(item) {
var text = item.querySelector('.item-text');
if (text && text.scrollWidth > text.clientWidth + 2) {
hasOverflow = true;
}
});

if (hasOverflow) {
wrap.classList.add('hide-dates');
} else {
wrap.classList.remove('hide-dates');
}
}

checkDates();

var resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(checkDates, 100);
});
})();
</script>
</div>

侧边栏（不带日期）：

<div class="wp-news-scroll">
<style>
.wp-news-scroll {
background: #fff;
border: 1px solid #ddd;
border-radius: 16px;
padding: 20px;
font-family: "Microsoft YaHei", Arial, sans-serif;
}

.scroll-title {
font-size: 16px;
color: #333;
border-bottom: 2px solid #2b6cb0;
padding-bottom: 10px;
margin: 0 0 15px 0;
font-weight: 600;
}

.news-wrap {
height: 200px;
overflow: hidden;
background: #f7fafc;
border-radius: 12px;
position: relative;
}

.news-list {
margin: 0;
padding: 0;
list-style: none;
animation: scrollUp 15s linear infinite;
will-change: transform;
}

.news-wrap:hover .news-list {
animation-play-state: paused;
}

@keyframes scrollUp {
0% {transform: translateY(0);}
100% {transform: translateY(-50%);}
}

.news-item {
display: flex;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid #e2e8f0;
font-size: 14px;
color: #555;
text-decoration: none;
transition: all 0.2s;
gap: 8px;
}

.news-item:hover {
background: #ebf8ff;
color: #2b6cb0;
padding-left: 20px;
}

.news-item:before {
content: "•";
color: #2b6cb0;
font-weight: bold;
margin-right: 2px;
flex-shrink: 0;
}

.item-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}

/* 日期样式 */
.date {
flex-shrink: 0;
color: #999;
font-size: 12px;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 10px;
font-family: Arial, sans-serif;
white-space: nowrap;
}

/* 统一隐藏模式：只要有隐藏，全部隐藏 */
.news-wrap.hide-all-dates .date {
display: none !important;
}

/* 绿色发光效果 */
.news-item.green-glow {
color: #059669;
text-shadow: 0 0 5px rgba(5, 150, 105, 0.3);
}

.news-item.green-glow:hover {
color: #047857;
text-shadow: 0 0 8px rgba(5, 150, 105, 0.5);
background: #f0fdf4;
}

.news-item.green-glow:before {
color: #10b981;
}

.view-more {
margin-top: 15px;
font-size: 13px;
text-align: right;
}

.view-more a {
color: #666;
text-decoration: none;
transition: all 0.2s;
padding: 4px 8px;
border-radius: 6px;
}

.view-more a:hover {
color: #2b6cb0;
background: #f1f5f9;
}
</style>

<h4 class="scroll-title">最新公告</h4>
<div class="news-wrap" id="newsWrap">
<ul class="news-list">
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
<li><a href="https://jump.923ka.com/#login?code=XcDKMLpm" target="_blank" rel="noopener noreferrer nofollow" class="news-item green-glow"><span class="item-text">科学上网无限流量</span><span class="date">2026年01-28</span></a></li>
<li><a href="https://www.ccyuanma.com/shop/1461.html" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">WordPress AI智能采集更新发布</span><span class="date">2026年01-27</span></a></li>
<li><a href="https://z-pay.cn/?uid=4837" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">【ZPAY】个人支付接口</span><span class="date">2026年01-26</span></a></li>
<li><a href="https://www.aliyun.com/minisite/goods?userCode=sgk87wpp" target="_blank" rel="noopener noreferrer nofollow" class="news-item"><span class="item-text">免费领取服务器折扣</span><span class="date">2026年01-25</span></a></li>
<li><a href="https://www.ccyuanma.com/" target="_blank" rel="noopener noreferrer" class="news-item"><span class="item-text">新增支付宝微信支付接口支持</span><span class="date">2026年01-24</span></a></li>
</ul>
</div>
<div class="view-more">
<a href="https://www.ccyuanma.com/" target="_blank">更多</a>
</div>

<script>
(function() {
function checkDates() {
var wrap = document.getElementById('newsWrap');
var items = wrap.querySelectorAll('.news-item');
var hasOverflow = false;

// 先检查是否有任何一条文本溢出
items.forEach(function(item) {
var text = item.querySelector('.item-text');
if (text && text.scrollWidth > text.clientWidth + 2) {
hasOverflow = true;
}
});

// 如果有溢出，统一隐藏所有日期；否则都显示
if (hasOverflow) {
wrap.classList.add('hide-all-dates');
} else {
wrap.classList.remove('hide-all-dates');
}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', checkDates);
} else {
checkDates();
}

var resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(checkDates, 100);
});
})();
</script>
</div>

文章最后更新时间：2026-01-29 14:39:33本文章资源链接若有错误或已失效，请点击报错或进群反馈

⚠️ 温馨提示：部分资源来源互联网搬运，330B模板网不能全部测试，遇到源码有授权加密以及后门，请放弃使用，本站不会添加任何后门。请勿相信源码里的广告QQ以及其他联系方式，以免被骗！

1.本站代码模板仅供学习交流使用，商用请支持正版！
2.源码下载后请在24小时内删除，严禁从事违法、侵权等任何非法活动，否则法律后果自负！

THE END