JavaScript实现动态内容横向滚动跑马灯
作者:像素漫游时间:2026-10-23 17:36:39浏览:113
本文介绍如何使用JavaScript和Ajax实现动态内容的横向滚动效果。通过获取后端数据并拼接HTML元素,利用定时器改变容器位置实现平滑滚动。代码包含动态生成列表项及处理滚动逻辑的完整示例,适用于新闻公告等场景。
HTML结构搭建
首先构建基础的HTML结构框架。
<div style="position: absolute; top: 0px; left: 168px; width: 100%; margin-left: auto; margin-right: auto; height: 47px; border: 0px solid red; overflow: hidden;">
<ul id="syNoticeUlNew" style="margin: 0px;left:0; top:0;margin-bottom:0px;width:100%;height:47px;position:absolute;">
</ul>
</div>
动态数据获取与渲染
目标是实现ul内部内容的横向逐字滚动,且内容需动态生成。为此,通过Ajax请求获取数据并进行拼接。
$.ajax({
type:"post",
dataType:"json",
url:"${contextPath}/indexPage/getSyNoticeInfo",
success:function(result){
var totalStr = "";
if(result.length>0){
for(var i=0 ; i<result.length;i++){
str = "<li style=\"list-style: none;display:inline-block;float:left;height:47px;padding-right:50px;line-height:47px;\">"+
"<a style=\"color:white;\" class=\"sstzNoticeStyle\">"+result[i].peopleName+"</a>"+
"</li>";
totalStr +=str;
}
}
$("#syNoticeUlNew").empty();
$('#syNoticeUlNew').html(totalStr);
syRunHorseLight();
}
});
列表项样式定义
在拼接li元素时,应用class名为sstzNoticeStyle的样式,具体定义如下。
.sstzNoticeStyle{
color:white; font-size:16px;text-decoration:none;
}
.sstzNoticeStyle:hover{
color:white; font-size:16px;text-decoration:none;
}
滚动逻辑实现
Ajax请求成功后调用syRunHorseLight函数,该函数定义如下。
function syRunHorseLight() {
if (syTimer != null) {
clearInterval(syTimer);
}
var oUl = document.getElementById("syNoticeUlNew");
if(oUl != null){
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
var lis = oUl.getElementsByTagName('li');
var lisTotalWidth = 0;
var resetWidth = 0;
for (var i = 0; i < lis.length; i++) {
lisTotalWidth += lis[i].offsetWidth;
}
for (var i = 1; i <= lis.length / 4; i++) {
resetWidth += lis[i].offsetWidth;
}
oUl.style.width = lisTotalWidth + 'px';
var left = 0;
syTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20)
$("#syNoticeUlNew").hover(function() {
clearInterval(syTimer);
}, function() {
clearInterval(syTimer);
syTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20);
})
}
}
至此,跑马灯滚动效果实现完毕。
以上内容为本文全部介绍,希望能为读者提供学习参考,感谢支持。
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码:结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果?FLIP技术实战
2026-11-04 10:12:22
