js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > js选项卡

js实现网站常用简洁的TAB选项卡淡出淡进切换特效代码

发布时间:2017-03-19 14:51:52    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

js实现网站常用简洁的TAB选项卡淡出淡进切换特效代码

js实现网站常用简洁的TAB选项卡淡出淡进切换特效代码

window.onload = function() {
    var oDiv = document.getElementById("tab");
    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
    var timer = null;
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].onclick = function() {
            show(this.index);
        }
    }
    function show(a) {
        index = a;
        var alpha = 0;
        for (var j = 0; j < oLi.length; j++) {
            oLi[j].className = "";
            aCon[j].className = "";
            aCon[j].style.opacity = 0;
            aCon[j].style.filter = "alpha(opacity=0)";
        }
        oLi[index].className = "cur";
        clearInterval(timer);
        timer = setInterval(function() {
            alpha += 2;
            alpha > 100 && (alpha = 100);
            aCon[index].style.opacity = alpha / 100;
            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
            alpha == 100 && clearInterval(timer);
        },
        5)
    }
}



tab 选项卡淡出淡进 切换

tab选项卡切换特效并且带更多按钮

jquery双重切换的tab选项卡特效代码

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery实现网页右下角向上弹出广告代码,支持tab切换

jquery左右布局的缓动Tab切换选项卡特效

jquery竖向tab切换焦点图特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

js tab选项卡新闻列表切换特效

jquery实现可触摸控制的tab选项卡特效

jquery定位滚动tab选项卡效果

jquery TabSwitch 选项卡插件

jquery实现支持响应的TAB手风琴特效代码

jquery实现向上滑动切换Tab选项卡特效

jQuery实现tab选项卡标签自动切换特效

jquery实现彩色标签图片tab选项卡滑动切换特效代码

jQuery滑动选项卡多个tab切换插件演示_js代码

横向(纵向)时间轴tab标签切换和水平(垂直)切换幻灯片效果 demo1# 横向滚动

js仿阿里巴巴的滑动TAB导航特效代码、不规则tab切换

js实现黑色不规则TAB选项卡特效代码