结构-行为-样式-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.

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洲上牧童

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值