这篇文章主要讲解了JS实现横向跑马灯的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
首先我们需要一个html代码的框架如下:
<div >
<ul id="syNoticeUlNew" >
</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();
}
});
拼接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);
})
}
}
跑马灯效果就此实现。
看完上述内容,是不是对JS实现横向跑马灯的方法有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。