js鼠标移入文字滚动的效果

let movetext = (el) => {
    if (!el) { return }
    let boxw = el.offsetWidth;
    let maxW = el.scrollWidth;
    let paremtDom = el.parentNode;
    if (!paremtDom) { return }
    let _cz = maxW - boxw;
    if (_cz > 0) {
        el.style.position = 'relative';
        el.style.zIndex = -1;
        let timer = '';
        let start = () => {
            if (timer) {
                clearInterval(timer)
            }
            let startnum = 0;
            timer = setInterval(() => {
                // console.log(startnum, maxW, Math.abs(startnum) - maxW > 0);
                el.style.left = startnum + 'px';
                if (Math.abs(startnum) - maxW > 0) {
                    el.style.left = boxw + 'px';
                    startnum = boxw;
                }
                startnum = startnum - 2;
            }, 83);
        }
        paremtDom.onmouseover = function(e) {
            start()
            el.style.width = maxW * 1 + 2 + 'px';
        }
        paremtDom.onmouseout = () => {
            clearInterval(timer)
            el.style.width = boxw + 'px';
            el.style.left = 0;
        }
    }
}

结合vue指令实现

Vue.directive("textscreen", {
   	inserted: (el, binding, vnode) => {
   		// 直接调用上面的方法
       	movetext(el)
   	},
   	update: (el, binding, vnode) => {
       movetext(el)
   	}
});