Xuanmo Blog

    利用js与css3的transition过渡属性做的一个选项卡切换图片

    js代码：

window.onload = function () {
    var aLi = document.getElementsByTagName('li');
    var aSpan = document.getElementsByClassName('bg');
    var aTxt = document.getElementsByTagName('a');
    var aImg = document.getElementsByTagName('img');
    var num = 0;
    start();
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onmouseover = function () {
            for (var i = 0; i < aImg.length; i++) {
                aImg[i].style.display = 'none';
                aSpan[num].style.cssText = 'width: 3px;transition: 0.7s';
                aTxt[num].style.cssText = 'color: ;transition: 0.7s';
            }
            num = this.index;
            start();
        }
    }

    function start() {
        aImg[num].style.display = 'block';
        aSpan[num].style.cssText = 'width: 150px;transition: 0.7s';
        aTxt[num].style.cssText = 'color: #fff;transition: 0.7s';
    }
}

DEMO展示