当前位置：首页 > backend >正文

关于在html页面利用js操作liMarquee以及解决使用过程中出现的问题，附全屏切换相关代码

backend 2025/7/13 9:47:38

1. 基本使用

引入插件以及css

<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="./css/liMarquee.css">
<script type="text/javascript" src="js/jquery.liMarquee.js"></script>

页面渲染

<div class="scroll" style="height: calc(100% - 20px);"><ul id="data_ul"></ul>
</div>

当页面刷新后执行以下代码，liMarquee具体配置参考：前往链接
下面代码的执行逻辑是：

const scrollConfig = {direction: 'up', // 滚动方向runshort: false, //内容不足时不滚动scrollamount: 20, // 滚动速度loop: -1 // 无限循环
}
$('.scroll').liMarquee(scrollConfig); // 开始执行滚动
updateScroll(); // 更新滚轮数据(初始数据一般通过接口拿历史数据)
function updateScroll() {const data = [{placeName: 'place1', monitorName: '温度', monitorValue: value1 + '℃'},{placeName: 'place2', monitorName: '湿度', monitorValue: value2 + '%'},{placeName: 'place3', monitorName: '压差1', monitorValue: value3 + 'Pa'},{placeName: 'place4', monitorName: '压差2', monitorValue: value4 + 'Pa'},{placeName: 'place5', monitorName: '压差3', monitorValue: value5 + 'Pa'}];const ul = document.getElementById('data_ul');data.forEach(item => {const row = document.createElement("li");row.innerHTML = `<span>${item.placeName}</span><span>${item.monitorName}</span><span>${item.monitorValue}</span>`;ul.appendChild(row);});$('.scroll').liMarquee('update');
}

2. 对接WebSocket

上面代码写好后，对接WebSocket推来的数据就容易对滚轮的数据实时刷新了

ws.onmessage = function (event) {const receivedData = JSON.parse(event.data);if (receivedData) {value1 = receivedData.value1;value2 = receivedData.value2;value3 = receivedData.value3;value4 = receivedData.value4;value5 = receivedData.value5;updateScroll(); // 推一次数据就更新滚轮}
}

3. 修复全屏切换导致卡顿

场景：点击全屏切换按钮时，切换全屏状态，但是切换时会导致滚轮卡顿。
解决：监听全屏状态，对liMarquee进行销毁和重置。

document.addEventListener('fullscreenchange', () => {const scroll = $('.scroll')scroll.liMarquee('destroy'); // 销毁liMarqueescroll.liMarquee(scrollConfig); // 重新滚动document.querySelector('.scroll').style.height = 'calc(100% - 20px)' // 重置高度updateScroll(); // 更新数据
});

全屏切换，如果使用的是Vue框架，可以参考此链接，实现起来更加简单。

const screenBtn = document.getElementById('screen-btn');
screenBtn.addEventListener("click", () => toggleFullScreen());function toggleFullScreen() {if (!!(document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement)) {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}} else {const element = document.documentElement; if (element.requestFullscreen) {element.requestFullscreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();}}
}