最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习。

Html代码:

<td word-roll tword="item">
      <div class="scroll_div fl">
          <div class="scroll_begin" ng-bind="item.project"></div>
          <div class="scroll_end"></div>
      </div>
</td>

样式代码:

.analysis .scroll_div {
            height: 26px;
            overflow: hidden;
            white-space: nowrap;
            width: 105px;
            margin-left: 10px;
        }

.analysis .scroll_begin,  .analysis .scroll_end {
            display: inline;
        }

指令Js代码:

define([ 'angular'], function() {
    var commonDirectives = angular.module("commonDirectives", []);
    //文字滚动
    commonDirectives.directive('wordRoll', [function() {
            return {
                restrict: 'AE',
                scope:{
                    tword:'='
                },
                link: function(scope, ele, attr) {
                    function ScrollImgLeft() {
                        var speed = 50;
                        var MyMar = null;
                        var $begin = $(ele).find("div");
                        var scroll_begin = $begin.eq(1)[0];
                        var scroll_end = $begin.eq(2)[0];
                        var scroll_div = $begin.eq(0)[0];
                        if(scroll_begin.offsetWidth > scroll_div.offsetWidth){
                            scroll_end.innerHTML = scroll_begin.innerHTML;
                        }
                        function Marquee() {
                            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
                                scroll_div.scrollLeft -= scroll_begin.offsetWidth;
                            }else {
                                scroll_div.scrollLeft++;
                            }
                        }
                        MyMar = setInterval(Marquee, speed);
                        scroll_div.onmouseover = function () { 
                            clearInterval(MyMar);     
                        }    
                        scroll_div.onmouseout = function () {       
                            MyMar = setInterval(Marquee, speed);         
                        }
                    }
                    scope.$watch('tword',function(o,n){
                        ScrollImgLeft();
                    })

                }
            }
        }])
})

沟通请加扣扣:740482406.

结构-行为-样式-angularJs 指令实现滚动文字的更多相关文章

  1. 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题

    最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...

  2. 结构-行为-样式-angularJs笔记

    0.关于Ng-app   通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...

  3. 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

    新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...

  4. 结构-行为-样式-angularJs ngAnimate(Js实现)

    声明 页面 Js 注意事项 官方链接 一.声明 注意animate的版本要与Angular的一致. <script src="jquery.1.9.1.min.js"> ...

  5. AngularJS 指令解析(二)

    AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...

  6. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  7. angularJs指令执行的机制==大概的三个阶段

    第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...

  8. AngularJs指令(一)

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  9. AngularJS指令进阶 – ngModelController详解

    AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...

随机推荐

  1. 快速构建Windows 8风格应用34-构建Toast通知

    原文:快速构建Windows 8风格应用34-构建Toast通知 引言 开发过WindowsPhone应用或者使用过WindowsPhone手机的开发者都知道,我们会收到一些应用的提示信息,这些提示信 ...

  2. 所有MVP文章

    http://msdn.microsoft.com/zh-cn/dd346590.aspx

  3. ADFS 2.0 配置简介 PartⅡ – 配置 ADFS 信任关系

    ADFS 与应用程序间的各种验证是基于信任关系的,在 ADFS 服务器配置好要信赖的应用程序(以 URL 为标识)后,应用程序再通过指定认证服务器来将用户引导至 ADFS 登录页,登录完成后再将用户的 ...

  4. JavaScript闭包小窥

    众所周知,JavaScript没有块级作用域,只有函数作用域.那就意味着定义在函数中的参数和变量在函数外部是不可见的,而在一个函数内部任何位置定义的变量,在该函数内部任何地方都可见.这带来的好处是内部 ...

  5. OpenGL Development Cookbook chapter7部分翻译

    让我们通过以下简单步骤开始我们的配方: 1.通过读取外部的体数据文件,并通过该加载数据集数据转换成一个OpenGL纹理.也使硬件的mipmap生成.通常情况下,从使用一个横截面中获得的体积数据文件存储 ...

  6. WCF 自承载

    WCF 自承载 提供源码 一.WCF 简单介绍 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,是一套通讯接口.现在比较流行的S ...

  7. Load ContextCLR 探测

    目录 背景Load ContextCLR 探测过程弱签名程序集的探测过程强签名程序集的探测过程Default ContextLoad-From ContextNo ContextRelfection- ...

  8. UML类图的常见关系1

    设计模式之UML类图的常见关系(一)   本篇会讲解在UML类图中,常见几种关系: 泛化(Generalization),依赖(Dependency),关联(Association),聚合(Aggre ...

  9. eclipse在Ubuntu 13.04下的安装过程

    eclipse在Ubuntu 13.04下的安装过程及问题小记 一.eclipse安装过程 首先确保在安装eclipse之前已经安装好Java虚拟机 1. eclipse官网下载压缩包 下载地址:ht ...

  10. 反射实现IOC功能

    通过反射实现IOC功能   这段时间园子里有不少介绍IOC组件的文章,由于自己也一直在学习IOC的各种组件,及IOC的思想,常见的IOC组件很多:AutoFac.Ninject.Utity包括.NET ...