优德娱乐场w88手机版:一个值得你收藏的教程网站

简单的angular实现的文字上下无缝滚动

时间:2016-09-13 00:00:00 编辑:简简单单 来源:转载

最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令。

css代码:主要控制样式


html代码:




   

       

               
               
           

   


当然大家的代码都是基于页面中已经引入angular.js文件下来运行的

slide-follow是大家需要实现的指令   dataset-data = "datasetData" 是大家需要显示的文字

js代码

<script type="text/javascript">
    var app =angular.module("tip",[]);
    app.controller("TipController",function($scope){
        // 数据可以根据自己使用情况更换
        $scope.datasetData = [
            {option : "这个是第一条数据"},
            {option : "这个是第二条数据"},
            {option : "这个是第三条数据"},
            {option : "这个是第四条数据"},
            {option : "这个是第五条数据"},
            {option : "这个是第六条数据"}
        ]
    })
    .directive("slideFollow",function($timeout){
        return {
            restrict : 'E',
            replace : true,
            scope : {
                id : "@",
                datasetData : "="
            },
            template : "

  • {{data.option}}
  • ",
                link : function(scope,elem,attrs) {
                    $timeout(function(){
                        var className = $("." + $(elem).parent()[0].className);
                        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,4000);

                        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","0px");
                            }
                        }

                        // 清除定时器
                        className.hover(function(){
                            clearInterval(sh);
                        },function(){
                            clearInterval(sh);
                            sh = setInterval(slide,4000);
                        })


                    },0)

                }
            }
        })
    </script>

    首先大家在controller中定义了需要显示的文字,接下来大家就可以开始定义指令部分。

    运行效果图:

    简单的angular实现的文字上下无缝滚动

    文章评论

    热门栏目

    XML 地图 | Sitemap 地图