【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用angularjs模拟淘宝首页-淘宝头条滚动效果</title>
        <script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script>
        <style type="text/css">
        .box{
            margin:100px auto;
            border:1px solid #ccc;
            width:170px;
            height:42px;
            line-height:20px;
            overflow:hidden;
        }
        .box .content{
            list-style-type:none;
            margin:0;padding:0;
            margin-left:6px;
        }
        /*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/
        .box .content a{
            font-size:12px; 
            line-height:16px;
        }
    </style>
    </head>
    <body ng-app="myApp">
        <div class="box" ng-controller="ezCtrl">
            <div id="transverseRoll">
                <div class="content" ng-repeat="item in msgArr track by $index">
                    <span ng-bind="item"></span>
                </div>
        </div>
        <script language="javascript">
            var app = angular.module("myApp", []);
            app.controller("ezCtrl", function ($scope, $http,$timeout,$interval) {
                $scope.items = [
                    {
                        con:[
                            '身高多少',
                            '体重多少',
                        ]    
                        
                    },
                    {
                        con: [
                            '身高多少1',
                            '体重多少1',
                        ]    
                    },
                    {
                        con: [
                            '身高多少2',
                            '体重多少2',
                        ]    
                    }
                ]
                /**
                 * des  仿淘宝首页-淘汰头条滚动效果
                 * @param  {[type]} timer [定时器]
                 * @param {[type]}  _timer [定时器]
                 * @param {[type]}  temp [临时变量用来存储当前显示的内容]
                 * @param {[type]}  max []
                 * @param {[type]}  index [当前显示内容的索引] 
                 * @param {[type]}  $scope.msgArr [当前显示内容] 
                */
                var  startmarquee = function(lh, speed, delay) {//lh-高度，speed 时间，
                    var timer = null,_timer = null,temp = [];
                    var max = $scope.items.length-1,index = 0;
                    var obj = document.getElementById("transverseRoll");//获取滚动元素
                    obj.style.marginTop = 0;
                    temp = $scope.items[index].con;
                    $scope.msgArr = temp.concat(temp);
                    var start = function() {
                        $scope.msgArr = [];//初始化
                        index++;//0,1,2
                        if (index > max) {
                            index = 0;
                        }
                        //更新显示内容
                        temp = $scope.items[index].con;
                        setTimeout(() => {
                            $scope.$apply(function(){
                                $scope.msgArr = temp.concat(temp);
                            });
                        }, 100);
                        clearInterval(timer);
                        timer = setInterval(scrolling, speed);
                        obj.style.marginTop = parseInt(obj.style.marginTop) - 4 + "px";
                    }
                    var scrolling = function() {
                        if (parseInt(obj.style.marginTop) % lh != 0) {
                            obj.style.marginTop = parseInt(obj.style.marginTop) - 4 + "px";
                            //滚动物体的marginTop >=  它的滚动高度/2   比如   |-40| >= 80/2    →→→→→→→→→→      0 % 20 = 0
                            if (Math.abs(parseInt(obj.style.marginTop)) >= obj.scrollHeight / 2) obj.style.marginTop = 0;
                        } else {
                            clearInterval(timer);
                            clearTimeout(_timer);
                            setTimeout(start, delay);
                        }
                    }
                    clearTimeout(_timer);
                    setTimeout(start, delay);
                }
                startmarquee(2000, 20, 1500);
            })
            
    </script>
    </body>
</html>
作者：smile.轉角
QQ：493177502
【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果

猜你喜欢
