美文网首页
angularJs单行向上滚动公告

angularJs单行向上滚动公告

作者: 简小咖 | 来源:发表于2018-05-15 13:10 被阅读0次

    定义指令

     .directive("slideFollow", function ($timeout) {
            return {
                restrict: 'E',
                replace: true,
                scope: {
                    id: "@",
                    datasetData: "="
                },
                template: "<li ng-repeat = 'data in datasetData'>{{data.option}}</li>",
                link: function (scope, elem, attrs) {
                    $timeout(function () {
                        var className = $("." + $(elem).parent()[0].className);
                        className.css("margin-top", "-20px");
                        var i = 0, sh;
                        var liLength = className.children("li").length;
                        var liHeight = className.children("li").height() + 
    parseInt(className.children("li").css('border-bottom-width'));
                        className.html(className.html() + className.html());
    
                        // 开启定时器
                        sh = setInterval(slide, 3000);
    
                        function slide() {
                            if (parseInt(className.css("margin-top")) > (-liLength * liHeight)) {
                                i++;
                                className.animate({
                                    marginTop: -liHeight * i + "px"
                                }, "slow");
                            } else {
                                i = 0;
                                className.css("margin-top", "0");
                            }
                        }
    
    
                    }, 500)
    
                }
            }
        })
    

    使用指令

    <ul class="slideUl" id="scrollWrap">
                            <!-- 指令 -->
          <slide-follow id="slide" dataset-data="datasetData">
    </slide-follow>
    </ul>
    

    定义数据

            // 数据可以根据自己使用情况更换
            $scope.datasetData = [
                { option: "恭喜:183****获得1元代金劵" },
                { option: "恭喜:183****获得2元代金劵" },
                { option: "恭喜:183**** 获得3元代金劵" },
                { option: "恭喜:183**** 获得4元代金劵" },
                { option: "恭喜:183**** 获得5元代金劵" },
                { option: "恭喜:183**** 获得6元代金劵" }
            ]
    

    相关文章

      网友评论

          本文标题:angularJs单行向上滚动公告

          本文链接:https://www.haomeiwen.com/subject/kzhedftx.html