js实现横向跑马灯
首先我们需要一个 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 中的内容进行横向的一点一点滚动。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();
}
});
注意 ajax 请求路径、展示内容的查询都需要自己写了，记得改一下
a 标签里的内容 result[i].peopleName 是根据自己定义的返回值来确定的
拼接 li 标签的时候，要对 sstzNoticeStyled 的 class 样式进行设置
.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);
})
}
}
这样一个横向的跑马灯就完成了，当然，具体的效果还需要根据自己的需求进行调整。
好事定律：每件事最后都会是好事，如果不是好事，说明还没到最后。