實現側邊欄工具（1）使用背景圖片方式

須要開發相似於CSDN文章瀏覽右側顯示的工具條，以下所示

須要實現的效果以下：

1 HTML格式

主要原理利用a標籤和圖片的sprite來實現
建立一個toolbat類的工具條div
點擊a標籤不產生任何效果

<div class="toolbar">
    a[href="javascript:;"].toolbar-item.toolbat-item-app*4
</div>

完整代碼，公共類toolbar-item用來設置相同的寬高，第一個app在鼠標hover時彈出二維碼下載，在a標籤中包含一個span標籤，用來放置二維碼

<div class="toolbar">
    <a href="javascript:;" class="toolbar-item toolbar-item-app">
        <span class="toolbar-layer"></span>    
    </a>
    <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
    <a href="javascript:;" class="toolbar-item toolbar-item-other">
        <span class="toolbar-layer"></span>
    </a>
    <a href="javascript:;" class="toolbar-item toolbar-item-top"></a>
</div>

2 CSS樣式

這裏使用sass樣式預編譯工具來編寫css樣式，sass的具體使用另外一篇文章中已經說過，參考 Sass和Compass學習筆記（1）
如下介紹將都在scss文件中編寫
公共變量設置，工具條尺寸

/* 參數變量設置 */
$toolbar-width: 90px;
$toolbar-height: 28px;

外部統一工具條toolbar類設置

.toolbar{
    position: fixed;//工具條固定定位
    right: 10%;
    top: 50%;
}

a標籤公共樣式toolbar-item設置

/* 公共樣式設置 */
.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-width;
    height: $toolbar-height;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    margin-top: 10px;
    z-index: 1000;
    transition: background-position 1s;
    /*鼠標hover時a標籤下面的toolbar-layer二維碼顯示，透明度爲1，兼容ie6,縮放大小爲1*/
    &:hover{
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

內部標籤訂義樣式

.toolbar-item-app{
    background-position: 0 0;
    &:hover{
        background-position: -100px 0;
    }
    
    .toolbar-layer{
        height: 112px;
        background-position: 0 -198px;
    }
}

.toolbar-item-feedback{
    background-position: 0 -33px;
    &:hover{
        background-position: -100px -33px;
    }
}
.toolbar-item-other{
    background-position: 0 -66px;
    &:hover{
        background-position: -100px -66px;
    }

    .toolbar-layer{
        height: 112px;
        background-position: 0 -198px;
    }
}
.toolbar-item-top{
    background-position: 0 -165px;
    &:hover{
        background-position: -100px -165px;
    }
}

二維碼初始樣式設置

.toolbar-layer{
    cursor: pointer;
    position: absolute;//相對於工具條絕對定位
    right: $toolbar-width;
    bottom:-1px;
    width: 90px;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    opacity: 0;//開始透明度爲0
    filter: alpha(opacity=0);
    transform: scale(0.01);//初始大小爲0.01，不可見
    z-index: 1000;
    transform-origin: right bottom;//從底部和右側開始縮放
    transition: all 1s;
}

3 性能優化

• 能夠將toolbar-item和toolbar-layer類相同的部分單獨提出

.toolbar-item, .toolbar-layer{
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;    
}

• 內部單個工具條欄目中有相似相同的代碼
  

能夠外部新建mixin統一模塊

@mixin toolbar-item($x, $y, $hoverx, $hovery){
    background-position: $x $y;

    &:hover{
        background-position: $hoverx $hovery;
    }
}

函數調用

@include toolbar-item(0, 0, -100px, 0);

transition屬於css3屬性，須要考慮不一樣瀏覽器的兼容性，一樣對transition進行封裝。
新建mixin

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

.toolbar-item中函數調用

@include transition(background-position 1s);

一樣其餘的CSS3屬性也須要如此考慮。