vertica-lamp.ts

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[vertica-lamp]' // Attribute selector
})
export class VerticaLampDirective {

  constructor(public el:ElementRef) {
    this.lineChange();
  }

  //跑马灯
  lineChange() {
    let child_div = this.el.nativeElement.children;
    setTimeout(()=>{
      console.log(child_div[0].offsetWidth)
      if(child_div.length > 0 && child_div[0].offsetWidth > 700 ){
        // this.start();
      }
    },1000)
  }

  //横向跑马灯
  start() {
    let child_div = this.el.nativeElement.children;
    const scrollWidth = this.el.nativeElement.offsetWidth;
    const textWidth = child_div[0].offsetWidth;
    console.log(child_div[0]);


    let i = scrollWidth;
    setInterval(()=>{
      i--;
      if(i < -textWidth){
        i = scrollWidth;
      }
      child_div[0].style.left = i + 'px';
    },20)
  }


}