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";
                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 != ){
            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 -= 1if (left <= -resetWidth) {
                    left = 0;
                }
                oUl.style.left = left + 'px';
            },20)
            $("#syNoticeUlNew").hover(function() {
                clearInterval(syTimer);
            },function() {
                clearInterval(syTimer);
                syTimer = setInterval(function() {
                    left -= 1;
                    resetWidth) {
                        left = 0;
                    }
                    oUl.style.left = left + 'px';
                },1)">);
            })
        }
    }

跑马灯效果就此实现。

js实现横向跑马灯效果

猜你在找的JavaScript相关文章