完善跑马灯效果——内容长时有横向滚动效果

之前的代码实现了跑马灯的纵向的滚动效果，每条内容长度固定，如果想实现纵向加横向的滚动效果，就是说完全显示内容的话，代码如下：
html代码：

<div class="shouHead clear">
    <div class="shouLeft">
        <span class="ywxian"></span><span class="ywfont">要闻通知</span>
    </div>
    <div class="shouRight">
        <ul class="slideTopbox" slide-scroll style="top:0px;">
            <li><a href="">AngularJS 通过新的属性和表达式扩展了 HTML。</a></li>
            <li><a href="">2016-8月AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。</a></li>
            <li><a href="">第三季度AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。</a></li>
            <li><a href="">关于AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。</a></li>
        </ul>
    </div>
</div>

css代码:

.shouHead {
    width: 100%;
    background: #FFFFFF;
    height: 50px;
}
.shouLeft {
    float: left;
    width: 2.04rem;
    line-height: 50px;
    color: #4371B3;
    font-size: .32rem;
    background-size: 80px;
}
.ywxian {
    display: inline-block;
    width: .08rem;
    height: .24rem;
    background: #34d1f2;
    margin-left: 8px;
}
.ywfont {
    margin-left: 8px;
}
.shouRight {
    float: left;
    width: 4.36rem;
    height: 30px;
    text-align: left;
    line-height: 1rem;
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}
.clear:after {
    content: "";
    clear: both;
    visibility: hidden;
    display: block;
    height: 0;
}

js代码：

angular.module('starter.workspaceServices', [], function($compileProvider) {})
.directive('slideScroll', function($window, $timeout) {
    return {
        restrict: 'AE',
        link: function(scope, element, attr) {
            var itsWatch = scope.$watch("its", function(newvalue, oldvalue) {
                if(oldvalue != newvalue) {
                    itsWatch();
                    var i = 0;
                    var length = element[0].children.length;
                    var widthwindow = $window.innerWidth - 110;  //根据自己定义的宽度进行减少
                    var firstwidth = element[0].children[0].children[0].offsetWidth;

                    setInterval(function() {
                        if(i == length) {
                            i = 0;
                            element[0].style.top  = "0px";
                        }

                        var topscorll = -(i * 30);
                        var widthself = element[0].children[i].children[0].offsetWidth;
                        if(widthself > widthwindow) {
                    leftGundong(element[0].children[i].children[0])
                        }

                        feeltoTop(topscorll);
                        i++;
                    }, 3000)
                    function feeltoTop(topscorll){                      
                        var buchang = -10;
                        var feelTimer = setInterval(function(){
                            element[0].style.top = parseInt(element[0].style.top) + buchang + "px";console.log(element[0].style.top)
                            if(parseInt(element[0].style.top) <= topscorll){
                                element[0].style.top = topscorll + "px";
                                window.clearInterval(feelTimer);
                            }
                        },100);

                    }
                    function leftGundong(target) {
                        var tWidth = target.offsetWidth;
                        target.style.left = "0px";
                        target.style.position = "absolute";
                        //target.style.marginLeft = "0px";
                        var juli = -3; //步长；
                        var leftAll = widthwindow - parseInt(tWidth); //需要移动的距离
                        setTimeout(function() {
                            var leftTimer = setInterval(function() {
                                var tLeft = parseInt(target.style.left);
                                target.style.left = tLeft + juli + "px";
                                if(tLeft <= leftAll) {
                                    window.clearInterval(leftTimer);
                                    setTimeout(function(){
                                        //target.style.left = "0px";
                                    },1000)
                                }
                            }, 100)
                        }, 1000)

                    }
                }
            })

        }
    }
})

效果为：