国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

實(shí)現(xiàn)側(cè)邊欄工具（1）使用背景圖片方式

booster / 1698人閱讀

摘要：新建中函數(shù)調(diào)用同樣其他的屬性也需要如此考慮。

需要開(kāi)發(fā)類似于CSDN文章瀏覽右側(cè)顯示的工具條，如下所示

需要實(shí)現(xiàn)的效果如下：

1 HTML格式

主要原理利用a標(biāo)簽和圖片的sprite來(lái)實(shí)現(xiàn)
創(chuàng)建一個(gè)toolbat類的工具條div
點(diǎn)擊a標(biāo)簽不產(chǎn)生任何效果


    a[href="javascript:;"].toolbar-item.toolbat-item-app*4

完整代碼，公共類toolbar-item用來(lái)設(shè)置相同的寬高，第一個(gè)app在鼠標(biāo)hover時(shí)彈出二維碼下載，在a標(biāo)簽中包含一個(gè)span標(biāo)簽，用來(lái)放置二維碼

2 CSS樣式

這里使用sass樣式預(yù)編譯工具來(lái)編寫(xiě)css樣式，sass的具體使用另一篇文章中已經(jīng)說(shuō)過(guò)，參考 Sass和Compass學(xué)習(xí)筆記（1）
以下介紹將都在scss文件中編寫(xiě)
公共變量設(shè)置，工具條尺寸

/* 參數(shù)變量設(shè)置 */
$toolbar-width: 90px;
$toolbar-height: 28px;

外部統(tǒng)一工具條toolbar類設(shè)置

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

a標(biāo)簽公共樣式toolbar-item設(shè)置

/* 公共樣式設(shè)置 */
.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;
    /*鼠標(biāo)hover時(shí)a標(biāo)簽下面的toolbar-layer二維碼顯示，透明度為1，兼容ie6,縮放大小為1*/
    &:hover{
        .toolbar-layer{
            opacity: 1;
            filter: alpha(opacity=100);
            transform: scale(1);
        }
    }

}

內(nèi)部標(biāo)簽定義樣式

.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;
    }
}

二維碼初始樣式設(shè)置

.toolbar-layer{
    cursor: pointer;
    position: absolute;//相對(duì)于工具條絕對(duì)定位
    right: $toolbar-width;
    bottom:-1px;
    width: 90px;
    background-image: url(../img/com-toolbar.png);
    background-repeat: no-repeat;
    opacity: 0;//開(kāi)始透明度為0
    filter: alpha(opacity=0);
    transform: scale(0.01);//初始大小為0.01，不可見(jiàn)
    z-index: 1000;
    transform-origin: right bottom;//從底部和右側(cè)開(kāi)始縮放
    transition: all 1s;
}
3 性能優(yōu)化

可以將toolbar-item和toolbar-layer類相同的部分多帶帶提出

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

內(nèi)部單個(gè)工具條欄目中有類似相同的代碼

可以外部新建mixin統(tǒng)一模塊

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

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

函數(shù)調(diào)用

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

transition屬于css3屬性，需要考慮不同瀏覽器的兼容性，同樣對(duì)transition進(jìn)行封裝。
新建mixin

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

.toolbar-item中函數(shù)調(diào)用

 @include transition(background-position 1s);

同樣其他的CSS3屬性也需要如此考慮。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87722.html

相關(guān)文章

  • 實(shí)現(xiàn)側(cè)邊欄工具（2）使用圖標(biāo)字體方式

    摘要：前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是結(jié)構(gòu)簡(jiǎn)單，容易閱讀和理解使用圖片瀏覽器兼容性好，可以兼容等低版本瀏覽器缺點(diǎn)就是使用了大量的圖片，對(duì)性能有一定的影響，并且不利于 前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具（1）使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是 HTML結(jié)構(gòu)簡(jiǎn)單，容易...

    kycool 評(píng)論0 收藏0

  • 實(shí)現(xiàn)側(cè)邊欄工具（2）使用圖標(biāo)字體方式

    摘要：前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是結(jié)構(gòu)簡(jiǎn)單，容易閱讀和理解使用圖片瀏覽器兼容性好，可以兼容等低版本瀏覽器缺點(diǎn)就是使用了大量的圖片，對(duì)性能有一定的影響，并且不利于 前面講了一下使用背景圖片來(lái)實(shí)現(xiàn)側(cè)邊工具欄的一個(gè)實(shí)現(xiàn)效果，實(shí)現(xiàn)側(cè)邊欄工具（1）使用背景圖片方式，可以看出這種方式的優(yōu)缺點(diǎn)是 HTML結(jié)構(gòu)簡(jiǎn)單，容易...

    Yangder 評(píng)論0 收藏0

  • 實(shí)現(xiàn)側(cè)邊欄工具（1）使用背景圖片方式

    摘要：新建中函數(shù)調(diào)用同樣其他的屬性也需要如此考慮。 需要開(kāi)發(fā)類似于CSDN文章瀏覽右側(cè)顯示的工具條，如下所示showImg(http://7xpaol.com1.z0.glb.clouddn.com/QQ%E6%88%AA%E5%9B%BE20151223203348.jpg); 需要實(shí)現(xiàn)的效果如下：showImg(http://7xpaol.com1.z0.glb.clouddn.com/...

    MkkHou 評(píng)論0 收藏0

  • flutter實(shí)戰(zhàn)1：完成一個(gè)有側(cè)邊欄的主界面

    摘要：側(cè)邊欄我們先圖解一下側(cè)邊欄的結(jié)構(gòu)整個(gè)側(cè)邊欄主從上到下按區(qū)塊分別放置了賬號(hào)和若干功能項(xiàng)分割線的列表，很容易想到使用布局控件。賬號(hào)信息區(qū)域中有賬號(hào)頭像粉絲頭像賬號(hào)文字信息和背景圖，這塊我們可以使用控件庫(kù)的控件實(shí)現(xiàn)。 經(jīng)過(guò)2周的學(xué)習(xí)，看過(guò)筆記1-8的小伙伴們已經(jīng)有不少開(kāi)始自己寫(xiě)APP了，我也按耐不住這股熱情，想要自己開(kāi)發(fā)個(gè)APP玩玩，so，從本篇起，仿造一個(gè)APP，項(xiàng)目從0開(kāi)始，每篇增加一些...

    孫淑建 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)側(cè)邊欄/分欄高度自動(dòng)相等

    摘要：一為何要分欄高度一致分欄高度一致的目的是更加美觀。二純實(shí)現(xiàn)側(cè)邊欄分欄高度自動(dòng)相等這里直接介紹我認(rèn)為的最佳的側(cè)邊欄分欄高度自動(dòng)相等方法。 一、為何要分欄高度一致？分欄高度一致的目的是更加美觀。舉兩個(gè)例子吧。 ① 對(duì)于分欄布局，我們或許會(huì)用邊框(border)進(jìn)行分隔，就如鄙人博客的分欄：邊框分欄 張?chǎng)涡?鑫空間-鑫生活 此時(shí)最擔(dān)心的問(wèn)題就是高度不一致，尤其是無(wú)邊框?qū)傩缘姆謾诟叨瘸^(guò)有邊框...

    li21 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<