85 lines
2.5 KiB
HTML
85 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>LayUI 流动公告栏</title>
|
||
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
|
||
<style>
|
||
.notice-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background-color: #FFFACD; /* 浅黄色背景 */
|
||
border-top: 1px solid #D4B000; /* 边框 */
|
||
z-index: 9999;
|
||
overflow: hidden;
|
||
}
|
||
.notice-content {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
padding-left: 100%;
|
||
animation: scroll-left 15s linear infinite;
|
||
}
|
||
@keyframes scroll-left {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 其他页面内容 -->
|
||
|
||
<!-- 公告栏容器 -->
|
||
<div id="noticeBar" class="notice-bar"><div id="noticeContent" class="notice-content"></div></div>
|
||
|
||
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
|
||
<script>
|
||
layui.use(['jquery'], function(){
|
||
var $ = layui.jquery;
|
||
|
||
// 公告内容
|
||
var notices = [
|
||
"重要公告：系统将于2025年7月10日进行维护升级，预计停机2小时。",
|
||
"温馨提示：请及时更新您的个人信息以确保服务正常使用。",
|
||
"通知：新版本V2.5已上线，新增多项功能，欢迎体验！"
|
||
];
|
||
|
||
// 初始化公告栏
|
||
initNoticeBar(notices);
|
||
|
||
function initNoticeBar(notices) {
|
||
var noticeText = notices.join(" "); // 用两个全角空格分隔每条公告
|
||
$('#noticeContent').text(noticeText);
|
||
|
||
// 动态调整动画时间基于文本长度
|
||
var textWidth = getTextWidth(noticeText);
|
||
var screenWidth = $(window).width();
|
||
var duration = Math.max(15, Math.floor(textWidth / 50)); // 最小15秒
|
||
|
||
$('#noticeContent').css('animation-duration', duration + 's');
|
||
}
|
||
|
||
// 计算文本宽度
|
||
function getTextWidth(text) {
|
||
var $temp = $('<span>').text(text).css({
|
||
'position': 'absolute',
|
||
'visibility': 'hidden',
|
||
'white-space': 'nowrap',
|
||
'font-size': '14px'
|
||
}).appendTo('body');
|
||
|
||
var width = $temp.width();
|
||
$temp.remove();
|
||
return width;
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |