AngularJS driective 封装 自动滚动插件

angular.module(‘app‘)
    .directive(‘uiSmoothScroll‘, [‘$location‘, ‘$anchorScroll‘, function($location, $anchorScroll) {
        return {
            restrict: ‘AC‘,
            scope: {
                data:"="
            },
            template: ‘
‘+
                    ‘
‘+
                        ‘
‘+
                            ‘‘+
                        ‘
‘+
                    ‘
‘+
                ‘
‘,
            link: function(scope, element, attrs) {
                setTimeout(function(){
                    var c = $(element).find(‘.smooth-scroll-container‘)[0];
                    var ul = $(c).find(‘.smooth-scroll‘)[0];
                    var lis = ul.getElementsByTagName(‘li‘);
                    var itemCount = lis.length,
                        width = lis[0].offsetWidth,
                        marquee = function() {
                            c.scrollLeft += 2;
                            if (c.scrollLeft > width) {
                                ul.appendChild(ul.getElementsByTagName(‘li‘)[0]);
                                c.scrollLeft = 0;
                            };
                        },
                        speed = 30;
                    ul.style.width = (width+13) * itemCount + 40 + ‘px‘ ;
                    var timer = setInterval(marquee, speed);
                    c.onmouseover = function() {
                        clearInterval(timer);
                    };
                    c.onmouseout = function() {
                        timer = setInterval(marquee, speed);
                    };
                },100);

            }
        };
    }]);

 



　　Controller 中对 数据的绑定

 $scope.slides = [{ image: ‘img/qy_lunbo_01.png‘ },{ image: ‘img/qy_lunbo_02.png‘ },{ image: ‘img/qy_lunbo_03.png‘ },{ image: ‘img/qy_lunbo_04.png‘ }];


　　

 
搞定！
 
AngularJS driective 封装 自动滚动插件
标签：href   lin   class   使用方法   script   $scope   var   rect   文件内容   
原文地址：http://www.cnblogs.com/pangguoming/p/7168342.html