好资源导航 » 文章资讯 » JS实现横向跑马灯效果代码

JS实现横向跑马灯效果代码

2023-07-26 23:43:03 299

首先我们需要一个html代码的框架如下：

我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容应该是动态的。于是应该发送ajax来进行内容的获取拼接。

$.ajax({
type:"post",
dataType:"json",
url:"${contextPath}/indexPage/getSyNoticeInfo",
success:function(result){
vartotalStr="";
if(result.length>0){
for(vari=0;i"+
""+result[i].peopleName+""+
"";
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函数，函数如下：

functionsyRunHorseLight(){
if(syTimer!=null){
clearInterval(syTimer);
}
varoUl=document.getElementById("syNoticeUlNew");
if(oUl!=null){
oUl.innerHTML+=oUl.innerHTML;
oUl.innerHTML+=oUl.innerHTML;
oUl.innerHTML+=oUl.innerHTML;
varlis=oUl.getElementsByTagName('li');
varlisTotalWidth=0;
varresetWidth=0;
for(vari=0;i
跑马灯效果就此实现。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS实现横向跑马灯效果代码

热门推荐

随机推荐