结构-行为-样式-angularJs 指令实现滚动文字

最近在做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.