HTML + CSS + JavaScript 鼠标悬停开始滚动显示文字

HTML代码

<ul>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
    <li class="list_item"><a href="#">文字很长的时候，长到超出了界限，我想让他滚动起来，如何才可以滚动？</a></li>
</ul>

CSS 代码

ul {
    list-style: none;
}
li {
    position: relative;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    overflow: hidden;
}
li a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}

JavaScript 代码

let listElem = document.getElementsByClassName('list_item');
let n = listElem.length;
let leftDistance = 0;
let setIntervalMove = [];
for (let i=0; i<n; i++) {
    listElem[i].onmouseover = function() {
        let aElem = this.children[0];
        let moveDistance = aElem.offsetWidth - this.offsetWidth;
        setIntervalMove[i] = setInterval(() => {
            if (leftDistance < moveDistance) {
                leftDistance += 10;
                    aElem.style.left = -leftDistance + 'px';
            } else {
                clearInterval(setIntervalMove[i]);
                leftDistance = 0;
            }
        }, 120);
    }
    listElem[i].onmouseout = function() {
        clearInterval(setIntervalMove[i]);
        leftDistance = 0;
        let aElem = this.children[0];
        aElem.style.left = '';
    }
}

原文地址：http://www.cnblogs.com/trdack/p/16889057.html