AngularJS driective 封装 自动滚动插件

1.ui-smooth-scroll.js文件内容

angular.module('app')
    .directive('uiSmoothScroll', ['$location', '$anchorScroll', function($location, $anchorScroll) {
        return {
            restrict: 'AC',
            scope: {
                data:"="
            },
            template: '<div class="smooth-scroll-container">'+
                    '<ul class="smooth-scroll">'+
                        '<li ng-repeat="item in data">'+
                            '<a  href="{{item.url}}" ><img ng-src="{{item.image}}" alt="" class="img-responsive" /></a>'+
                        '</li>'+
                    '</ul>'+
                '</div>',
            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);

            }
        };
    }]);

  HTML 使用方法

 <div ui-smooth-scroll data="slides">

  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' }];

搞定!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏俗人笔记

超简单实现WEB页面顶部阅读进度条

网页顶部的加载进度条非常常见,像Youtube和Github上都有见到。最近经常浏览一些文字类的网页,而在移动端的浏览器,右侧的滚动条有时会自动隐藏很不显眼,想...

3739
来自专栏编程之旅

iOS开发——制作圆形头像

在iOS7之后,我们能发现许多应用都开始使用圆形来作为用户头像的形状,代表App就是腾讯QQ了,QQ的头像就是圆形的。

2042
来自专栏一“技”之长

iOS中支持HTML文本的标签控件——MDHTMLLabel

        在iOS开发中对HTML的处理很多时候除了使用WebView外,还需要原生的控件对其进行渲染,例如将HTML字符串渲染为图文混排的View视图。...

1481
来自专栏mukekeheart的iOS之旅

iOS学习——UIView的研究

在iOS开发中,我们知道有一个共同的基类——NSObject,但是对于界面视图而言,UIView是非常重要的一个类,UIView是很多视图控件的基类,因此,对于...

4478
来自专栏学海无涯

iOS 8 之后UINavigationController新特性

iOS 8 之后,UINavigationController 为开发者提供了一些好用的功能,这些功能以前实现起来可能比较麻烦,而现在只需要一个属性就搞定了。

1682
来自专栏技术博客

JavaScript 获取屏幕的高度和宽度

screen.availHeight:显示浏览器的屏幕的可用高度(这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。)

972
来自专栏更流畅、简洁的软件开发方式

发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)

功能介绍:     可以实现锁定表格的行和列的功能,效果和Excel里的冻结窗格类似,当然没有Excel那么强大了,只是类似。 问题:     当一个t...

7706
来自专栏deepcc

学习js在线html(富文本)编辑器

2.9K7
来自专栏Alice

绘图quartz之阴影

    //设置矩形的阴影  并在后边加一个圆 不带阴影  步骤: CGContextRef context = UIGraphicsGetCurre...

1875
来自专栏一“技”之长

iOS UIButton解读

UIButton的初始化一般使用其类方法,+ (id)buttonWithType:(UIButtonType)buttonType;

832

扫码关注云+社区

领取腾讯云代金券