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 条评论
登录 后参与评论

相关文章

来自专栏Alice

绘图quartz之阴影

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

1835
来自专栏积累沉淀

JavaScript 动态加载脚本和样式

3大点: 1.元素位置 2.动态脚本 3.动态样式 一.元素位置 getBoundingClientRect()。这个方法返回一个矩形对象,包含四个属性:lef...

21310
来自专栏LIN_ZONE

IOS系统下虚拟键盘遮挡文本框问题的解决

最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮...

893
来自专栏Charlie's Road

图层几何学 -- iOS Core Animation 系列二

《图层树和寄宿图 -- iOS Core Animation 系列一》介绍了图层的基础知识和一些属性方法。这篇主要内容是学习下图层在父图层上怎么控制位置和尺寸的...

873
来自专栏九彩拼盘的叨叨叨

滑动到底部无限加载的实现

我们常常会碰到数据条数很多,需要分页显示的情况。对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限...

762
来自专栏一“技”之长

iOS UITableViewCell使用详解

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSStr...

592
来自专栏编程之旅

iOS开发——制作圆形头像

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

1522
来自专栏技术博客

JavaScript 获取屏幕的高度和宽度

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

862
来自专栏Objective-C

iOS-修改系统Tabbar背景色

2857
来自专栏一“技”之长

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

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

1061

扫码关注云+社区