一款简单选项卡切换图片

轩陌

分类: 实战案例 3487 11

    利用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展示

  • 4人 Love
  • 0人 Haha
  • 1人 Wow
  • 0人 Sad
  • 0人 Angry
demo

作者简介: 轩陌

打赏

生命的意义在于折腾。

共 11 条评论关于 “一款简单选项卡切换图片”

Loading...