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