js实现横向跑马灯效果

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);
            })
        }
    }

这样一个横向的跑马灯就完成了，当然，具体的效果还需要根据自己的需求进行调整。

---

好事定律：每件事最后都会是好事，如果不是好事，说明还没到最后。