li 由上向下依次下滑效果

angular.module('analysis.realtime')
    .controller('userActionController', ['$rootScope', '$scope', 'realtimeService', function($rootScope, $scope, realtimeService) {
        $scope.isLoading = true;
        var mpId = $rootScope.mpId;
        var count = 1;
        $scope.headerInfo = {
            title: '实时用户行为',
            tip: '上一个 5min 区间内, 用户访问网站不同的页面情况'
        };
        realtimeService.getUserBehavior(mpId).then(function(json) {
            $scope.isLoading = true;
            var i = 0;
            var jsonLength = json.length;
            if (jsonLength == 0) {
                $scope.isLoading = false;
                $('#slideLi').html('<span>暂无数据</span>');
                $('#slideLi').css({
                	'text-align': 'center',
    				'line-height': '250px'
                })
                return;
            };
            //var timer = window.setTimeout(fun1, 2000);
            fun1();

            function fun1() {
                if ($scope.isLoading) {
                    $scope.isLoading = false;
                };

                if (i != 0) {
                    $('.items' + (i - 1)).css({
                        'margin-top': '0px'//通过设置margin-top来实现下滑效果
                    });
                };
                if (i >= jsonLength) {
                    window.clearTimeout(timer);
                    return;
                } else {
                    timer = setTimeout(fun1, 1000);
                };
                $('#slideLi').prepend(' <li  class="textCss items' + i + '">\
                         <i class=' + json[i].device + '></i>\
                        <span class="deviceWidth">' + json[i].device + '</span>\
                        <span class="uvCookieWidth">' + json[i].uvCookie + '</span>\
                        <span class="toptitle themeColor" data-toggle="tooltip" data-placement="bottom" title="' + json[i].url + '">' + json[i].pageTitle + '</span>\
                        <span class="updateTime">' + json[i].time + '</span>\
                        </li> ');
                i++;
                $(function() { $("[data-toggle='tooltip']").tooltip(); });
            };
            /*点击播放*/
            $scope.slide = function() {
                if ($('#mediaBtn').attr('class').indexOf('pause') > 0) {
                    //暂停播放
                    $('#mediaBtn').attr('class', 'glyphicon glyphicon-play');
                    $('.user-action-tooltips span').text('播放用户行为');
                    $('#mediaBtn').css({
                        'border': '1px solid #999'
                    });
                    window.clearTimeout(timer);
                } else {
                    //继续播放
                    $('#mediaBtn').attr('class', 'glyphicon glyphicon-pause');
                    $('.user-action-tooltips span').text('暂停用户行为');
                    $('#mediaBtn').css({
                        'border': '1px solid #19ac9e'
                    });
                  fun1();
                }
            };
            $rootScope.$on('$stateChangeStart', function() { 
//监控是否离开实时页面,主要处理的问题当离开实时页面时，定时器会自动的加载，页面就会出现，数据重叠现象。
                window.clearTimeout(timer);
            });

        });

        $scope.showTip = function() {
            $('.user-action-tooltips').css({
                'display': 'block',
                '-webkit-transition': 'all linear 3s'
            })
        };
        $scope.hideTip = function() {
            $('.user-action-tooltips').css({
                'display': 'none'
            })
        };

    }]);

　setTimeout 运用在延迟一段时间，再进行某项操作。

  setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象

 

  SetInterval为自动重复，setTimeout不会重复。

 

　

 

css样式

.user-action-slideUl .textCss {
    font-size: 12px;
    font-family: '微软雅黑';
    padding: 10px 5px;
    height: 40px;
    position: relative;
    margin-top: -40px;
    -webkit-transition: margin 0.5s;
    -moz-transition: margin 0.5s;
}

　　

转载于:https://www.cnblogs.com/dfghjkl/p/6484807.html