HTML

<ul>
    <li>
        <img src="images/1.jpg" alt="javascript高级前端开发课程"/>
        <a href="https://jy.tp.yuanmeng.life/js">网页特效<br /><span>高级前端开发课程</span></a>
        <span class="bg"></span>
    </li>
    <li>
        <img src="images/2.jpg" alt="XHTML+CSS高级页面架构师课程" />
        <a href="https://jy.tp.yuanmeng.life/templates">网站模板<br /><span>高级页面架构师课程</span></a>
        <span class="bg"></span>
    </li>
</ul>

JS

window.onload = function() {
    var oDiv = document.getElementById('box');
    var aLi = oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var iTime = 400;
    var iTime2 = 200;
    var i = 0;

    var duringA = function() {
        css(this, 'marginLeft', -(css(this, 'width')) / 2 - 1);
    };

    for (i = 0; i < aLi.length; i++) {

        aLi[i].onmouseover = function() {
            var oImg = this.getElementsByTagName('img')[0];
            var oA = this.getElementsByTagName('a')[0];
            var oBg = this.getElementsByTagName('span')[1];

            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
                return;
            }

            oA.onmouseover = oImg.onmouseover = oBg.onmouseover = function(ev) {
                if (this.parentNode.timer) {
                    clearTimeout(this.parentNode.timer);
                    this.parentNode.timer = null; (ev || event).cancelBubble = true;
                }
            };
            oImg.onmouseout = oA.onmouseout = oBg.onmouseout = function(ev) {
                var oParent = this.parentNode;
                if (oParent.timer) clearTimeout(oParent.timer);
                oParent.timer = setTimeout(function() {
                    oParent.onmouseout();
                    oParent.timer = null;
                },
                200); (ev || event).cancelBubble = true;
            };

            miaovStartMove2(oImg, {
                width: 153
            },
            MIAOV_MOVE_TYPE.FLEX,
            function() {
                css(this, 'marginLeft', -78);
            },
            duringA);

            miaovStartMove2(oA, {
                top: 56,
                paddingTop: 36,
                paddingBottom: 36
            },
            MIAOV_MOVE_TYPE.FLEX);
            miaovStartMove2(oBg, {
                height: 115
            },
            MIAOV_MOVE_TYPE.BUFFER);
        };

        aLi[i].onmouseout = function() {
            var oImg = this.getElementsByTagName('img')[0];
            var oA = this.getElementsByTagName('a')[0];
            var oBg = this.getElementsByTagName('span')[1];

            miaovStartMove2(oImg, {
                width: 0
            },
            MIAOV_MOVE_TYPE.BUFFER,
            function() {
                css(this, 'marginLeft', 0);
            },
            duringA);
            miaovStartMove2(oA, {
                top: 4,
                paddingTop: 8,
                paddingBottom: 0
            },
            MIAOV_MOVE_TYPE.BUFFER);
            miaovStartMove2(oBg, {
                height: 0
            },
            MIAOV_MOVE_TYPE.BUFFER);
        };
    }
};