【Little Demo】從簡單的Tab標簽到Tab圖片切換

Tab標簽切換效果是比較流行的一種網站頁面布局，視覺表現為美觀大方，通過標簽展示內容。目前在各大網站都有存在這種效果。例如：淘寶的黃金位置使用Tab標簽切換效果，網易新聞等。

 

1.簡單的 Tab 標簽

a) 先來實現Tab標簽的頭部

通過HTML和CSS完成基本的標簽效果。包括HTML的div標簽和列表標簽以及CSS定位、顏色和邊距等。

HTML代碼：

<div class="tab">
    <ul class="tab-title">
            <li  class="selected"><a href="#">公告</a> </li>
            <li><a href="#">規則</a> </li>
            <li><a href="#">論壇</a> </li>
            <li><a href="#">安全</a> </li>
            <li><a href="#">公益</a> </li>
    </ul>
</div>

CSS代碼：

body, ul, li { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; }
ul, ol { list-style: none; }
/*------------- Tab title  --------------*/
.tab { width: 290px; height: 98px; background: #fff; margin: 20px auto;border: 1px solid #ccc; }
.tab-title { position: relative; height: 24px; margin-bottom: 20px; margin-right: -2px; margin-top: 4px; overflow: hidden; ; padding: 0 8px; }
.tab-title li { float: left; width: 39px; line-height: 22px; text-align: center; margin: 0 8px; }
.tab-title li a:link, .tab-title li a:visited { text-decoration: none; color: #3c3c3c; }
.tab-title li a:hover { color: #f40; font-weight: 700; }
.tab-title li.selected {border-bottom: 2px solid #f40;font-weight: 700;padding: 0;}

效果：

2) 內容部分的添加

通過HTML和CSS完成內容部分添加和隱藏。包括HTML的div標簽和列表標簽以及CSS的字體效果、標簽的顯示與隱藏等。

HTML代碼：

<div class="tab"> 
    ...
    <div class="tab-content">
        <ul class="mod first">
            <li><a class="h" href="#">工商總局局長張茅：贊成馬雲像打酒駕一樣打假 </a></li>
            <li><a href="#">高法積極回應嚴刑打假</a></li>
            <li><a href="#">借鑒高檢嚴懲電信詐騙 </a></li>
        </ul>
        <ul class="mod hidden">
            <li><a href="#">七天無理由退貨規則 </a></li>
            <li><a href="#">發布未經准入規則變更</a></li>
            <li><a href="#">新增發布混淆信息規則 </a></li>
            <li><a href="#">擾亂市場秩序規則變更 </a></li>
        </ul>
        <ul class="mod hidden">...</ul>
        <ul class="mod hidden">... </ul>
        <ul class="mod hidden">... </ul>
    </div>
</div>

CSS代碼：

.tab .h { color: #f40 !important;}
.hidden{ display: none;}
.tab-content .first li:first-child{width: 260px;}
.tab-content .mod { height: 50px;margin: -10px 10px 10px;overflow: hidden;}
.tab-content .mod li{ float: left;height: 25px;line-height: 25px;overflow: hidden;width: 130px;}
.tab-content .mod a { text-decoration: none; color: #3c3c3c; }
.tab-content .mod a:hover { color: #f40; }

整體的顯示效果就出來了：

 

3) 添加JS代碼

通過使用JS DOM操作HTML標簽實現標簽的切換效果： 

function $(className) {
    // IE9以下版本瀏覽器不支持 getElementsByTagName 方法，可以改為通過設置元素id，然后通過id 獲取
    return typeof className=="string"?document.getElementsByClassName(className)[0]:className;
}

window.onload = function () {
    var titleName = $("tab-title").getElementsByTagName("li");
    var tabContent = $("tab-content").getElementsByTagName("ul");
    if(titleName.length != tabContent.length){ // 當數目不對等時，直接返回
        return;
    }
    var index = 0;
    for (var i=0;i<titleName.length;i++){
        titleName[i].tabIndex = i;
        titleName[i].onmouseover = function () {
            for (var j=0;j<titleName.length;j++){
                titleName[j].className = "";
                tabContent[j].style.display = "none";
            }
            this.className = "selected";
            tabContent[this.tabIndex].style.display = "block";
        };
    }
};

使用jQuery的話就更簡單了：

$(document).ready(function () {
    $(".tab-title li").mouseover(function () {
        var index = $(this).index();
        $(".tab-title li").removeClass("selected");
        $(".tab-content ul").hide();
        $(".tab-title li").eq(index).addClass("selected");
        $(".tab-content ul").eq(index).show();
    });
})

相關源碼：simple-tab.html

 

2.Tab箭頭標簽jQuery幻燈片

從上面的例子，大概了解了怎么實現Tab效果。進一步我們就可以實現通過Tab中的縮略圖控制廣告位圖片的切換。效果圖如下：

可以很明顯看出，這個Tab分為上面的圖片廣告位和下面的Tab圖片標簽，圖片廣告位又分為圖片和文字說明兩部分。

 

1) Tab圖片標簽

因為之前的選中狀態是通過設置 border-bottom 來實現的，但這里是通過一張圖片來設置選中狀態，所以需要設置選中狀態的樣式為相對於Tab圖片標簽為 position:absolute，

而圖片標簽置於底部也使用 position:absolute，另外我們設置整個模塊的位置為position:relation，這樣就可以設置 margin:auto 水平居中對齊了。

HTML代碼：

<div class="slide">
    <div class="imgContent"></div>
    <div class="imgTab">
        <ul class="mod">
            <li>
                <a href="javascript:;">
                    <img src="imgs/thumb_120_60_1349779141347.jpg" alt="中國“和平方舟”號醫院船抵達亞丁灣">
                </a>
            </li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
        <div class="now-status" style="left: 0px;"></div>
    </div>
</div>

CSS代碼：

body, ul, li { margin: 0; padding: 0; }
body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; }
ul,ol { list-style: none; }
/*------------- Tab title  --------------*/
.slide { width: 640px; height: 430px; margin: 20px auto;position:relative; }
.imgTab { position: absolute;height:70px; bottom:0;left:0;}
.imgTab ul{ width:660px;overflow:hidden; margin-top:10px;}
.imgTab li { width:120px;height:60px;margin-right:10px;float:left; }
.imgTab img {width: 120px;height: 60px;}
.imgTab .now-status {position:absolute;width:130px;height:20px;background:url(../imgs/slider-ico.png) no-repeat 0 0;z-index:-1;top:0;left:0;}

效果：

 

2) 圖片內容部分

HTML代碼：

<div class="slide">
    <div class="imgContent">
        <ul class="imgShow">
            <li><a href="#"><img  src="imgs/thumb_640_360_1349779141347.jpg"  alt="..."></a></li>
            <li class="hidden">... </li>
            <li class="hidden">... </li>
            <li class="hidden">...</li>
            <li class="hidden">... </li>
        </ul>
        <div class="imgText">
            <p class="text">...</p>
            <div class="shadow"></div>
        </div>
    </div>
    <div class="imgTab">... </div>
</div>

CSS代碼：

.hidden { display: none; }
.imgContent img { width: 640px; height: 360px; }
.imgContent .imgShow { height: 360px; overflow: hidden; }
.imgContent .imgText { bottom: 70px; width: 100%; position: absolute; }
.imgContent .imgText .text { z-index: 30; line-height: 20px; margin: 4px 10px 0 10px; position: absolute; }
.imgContent .imgText .text { font-weight: normal; font-size: 12px; color: #fff;}
.imgContent .shadow { background-color: #000; opacity: .5; filter: alpha(opacity=50); height: 70px;  }

效果：

 

3) 添加jQuery代碼

通過Tab切換當前Tab、廣告位的圖片和文字：

$(document).ready(function () {
    $(".imgTab li").mouseover(function () {
        var imgIndex = $(this).index();
        var leftNum = ($(".imgTab li").width()+10)*imgIndex+"px";
        var imgText = $(".imgShow li a").eq(imgIndex)[0].children[0].alt;
        $(".imgShow li").hide();
        $(".imgShow li").eq(imgIndex).show();
        $(".imgTab .now-status").css("left",leftNum);
        $(".imgText .text").text(imgText);
    });
})

這樣，簡單的切換效果就出來了：

 

4) 輪播和動畫

最后，我們可以通過定時器加上輪播效果，以及給Tab切換添上動畫效果，修改JS文件如下：

var loopImgs;
$(document).ready(function () {
    //每隔一秒切換圖片
     loopImgs = setInterval("changeTabByTimer()",2000);
    $(".imgTab li").mouseover(function () {
        clearInterval(loopImgs); // 清除循環事件
        changeTab($(this).index());
    });
    $(".imgTab li").mouseout(function () {
        loopImgs = setInterval("changeTabByTimer()",2000); // 啟用循環事件，間隔為2 秒;
    });
});

function changeTab(imgIndex) {
    var leftNum = ($(".imgTab li").width()+10)*imgIndex+"px";
    var imgText = $(".imgShow li a").eq(imgIndex)[0].children[0].alt;
    //淡入淡出
    $(".imgShow li").stop()
    $(".imgShow li").fadeOut();
    $(".imgShow li").eq(imgIndex).fadeIn();
    // 動畫效果
    $(".imgTab .now-status").stop();
    $(".imgTab .now-status").animate({left:leftNum });
    $(".imgText .text").text(imgText);
}
//循環事件
function changeTabByTimer() {
    var leftCss =$(".imgTab .now-status").css("left");
    var leftNum = parseInt(leftCss.substring(0,leftCss.length-2));
    var imgIndex = leftNum/($(".imgTab li").width()+10);
    var maxIndex = $(".imgTab li").length - 1;
    if(imgIndex<maxIndex){
        imgIndex++;
    }else {
        imgIndex=0;
    }
    changeTab(imgIndex);
}

相關源碼：tab-for-picture.html || tab-for-picture.css || tab-for-picture.js

 

3.Tab箭頭標簽jQuery幻燈片(Javascirpt實現)

用jQuery是比較簡單的，接下來我們用原生的JavaScript代碼實現：

1) 實現 Tab的效果

當我們把鼠標放到縮略圖上時，顯示當前聚焦的縮略圖Tab，以及顯示當前對應的廣告位大圖，通過第一個例子，這還是很容易實現的。JS代碼如下：

function $(className) {
    // IE9以下版本瀏覽器不支持 getElementsByTagName 方法，可以改為通過設置元素id，然后通過id 獲取
    return typeof className=="string"?document.getElementsByClassName(className)[0]:className;
}
window.onload = function () {
    var tabThumbs = $("imgTab").getElementsByTagName("li");
    var tabContent = $("imgContent").getElementsByTagName("li");
    var tabContentText = $("imgContent").getElementsByTagName("a");
    var nowStatus = $("now-status");
    for (var i=0;i<tabThumbs.length;i++){
        tabThumbs[i].tabIndex = i;
        tabThumbs[i].onmouseover = function () {
            for(var j=0;j<tabThumbs.length;j++){
                tabContent[j].style.display = "none";
            }
            nowStatus.style.left = (this.offsetWidth+10)* this.tabIndex +"px";
            tabContent[this.tabIndex].style.display = "block";
            $("text").innerText = tabContentText[this.tabIndex].children[0].alt;
        }
    }
}

 

2) 實現循環切換圖片的效果

window.onload = function () {
    var tabThumbs = $("imgTab").getElementsByTagName("li");
    //每隔一秒切換圖片
    var loopImgs = setInterval("changeTabByTimer()",2000);
    for (var i=0;i<tabThumbs.length;i++){
        tabThumbs[i].tabIndex = i;
        tabThumbs[i].onmouseover = function () {
            clearInterval(loopImgs); // 清除循環事件
            changeTab(this.tabIndex);
        }
        tabThumbs[i].onmouseout = function () {
            // 啟用循環事件，間隔為2 秒;
            loopImgs = setInterval("changeTabByTimer()",2000);
        }
    }
}

function changeTab(mIndex) {
    var tabThumbs = $("imgTab").getElementsByTagName("li");
    var tabContent = $("imgContent").getElementsByTagName("li");
    var tabContentText = $("imgContent").getElementsByTagName("a");
    var leftNum = (tabThumbs[0].offsetWidth+10)*mIndex+"px";
    var imgText =  tabContentText[mIndex].children[0].alt;
    // 廣告位大圖的隱藏和顯示
    for(var j=0;j<tabThumbs.length;j++){
        tabContent[j].style.display = "none";
    }
    tabContent[mIndex].style.display = "block";
    // Tab 標簽的聚焦
    $("now-status").style.left = leftNum;
    // 廣告位文字的修改
    $("text").innerText = imgText;
}

// 圖片循環切換
function changeTabByTimer() {
    var tabThumbs = $("imgTab").getElementsByTagName("li");
    var leftCss =  $("now-status").style.left;
    var leftNum = parseInt(leftCss.substring(0,leftCss.length-2));
    var imgIndex = leftNum/(tabThumbs[0].offsetWidth+10);
    var maxIndex = tabThumbs.length - 1;
    if(imgIndex<maxIndex){
        imgIndex++;
    }else {
        imgIndex=0;
    }
    changeTab(imgIndex);
}

function $(className) {
    return typeof className=="string"?document.getElementsByClassName(className)[0]:className;
}

 

3) 最后我們再來實現動畫效果：

 我們先加入淡入和滑動效果：

function toLeft(elem,left,speed) {
    speed = speed || 15;
    var elemLeft = elem.style.left;
    var val =  parseInt(elemLeft.substring(0,elemLeft.length-2));
    var valLeft = parseInt(left.substring(0,left.length-2));
    var toRight = val<valLeft?true:false;
    (function () {
        elem.style.left = val+"px";
        if(val<valLeft&&toRight){
            val += 10;
            setTimeout(arguments.callee, speed)
        }else if(val>valLeft&&!toRight){
            val -= 10;
            setTimeout(arguments.callee, speed)
        }
    })();
}
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
    /*
     * 參數說明
     * elem==>需要淡入的元素
     * speed==>淡入速度,正整數(可選)
     * opacity==>淡入到指定的透明度,0~100(可選)
     */
    speed = speed || 20;
    opacity = opacity || 100;
    //顯示元素,並將元素值為0透明度(不可見)
    elem.style.display = 'block';
    SetOpacity(elem, 0);
    //初始化透明度變化值為0
    var val = 0;
    //循環將透明值以5遞增,即淡入效果
    (function(){
        SetOpacity(elem, val);
        val += 5;
        if (val <= opacity) {
            setTimeout(arguments.callee, speed)
        }
    })();
}
var SetOpacity =  function(ev, v){
    ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}

然后，我們調用對應的方法：

fadeIn(tabContent[mIndex]);
// Tab 標簽的聚焦
toLeft($("now-status"),leftNum);

這樣 JavaScript的效果就實現了（源碼見 tab-for-picture-byjs.js）。