成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

模擬JD返回頂部功能

KevinYan / 573人閱讀

摘要：模擬返回頂部功能，添加在一定高度內(nèi)隱藏功能。涵蓋的內(nèi)容主要前端樣式排版，展示效果動(dòng)畫，以及展示效果腳本的編寫編寫仿返回頂部留言客服頂部需要根據(jù)自己的背景圖，修改背景位置。返回頂部添加顯示隱藏功能，可根據(jù)需求更改顯示隱藏效果。

模擬JD返回頂部功能，添加在一定高度內(nèi)隱藏功能。

返回頂部的前端實(shí)現(xiàn)。涵蓋的內(nèi)容主要： 前端樣式（html排版），展示效果（CSS3 動(dòng)畫），以及展示效果腳本的編寫（javascript編寫）

HTML



    
    仿JD返回頂部
    
    
    




    

        

            

                

                    
                    留言
                

                

                    
                    客服
                

                

                    
                    頂部
                

            

        

    





CSS
需要根據(jù)自己的背景圖，修改背景位置。
@charset "utf-8";
/**********************
 *CSS Animations by:
 * JD側(cè)邊欄
 * ljc
***********************/

body {
    margin: 0;
    padding: 0;
    height: 2000px;
}

i, em {
    font-style: normal;
}

.jd-disno{
    display: none ;
}

.jd-toolbar-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9990;
    width: 0;
    height: 100%;
}

.jd-toolbar-tabs {
    position: absolute;
    top: 82%;
    left: -35px;
    width: 35px;
    margin-top: -61px;
}

.jd-toolbar-tab {
    position: relative;
    width: 35px;
    height: 35px;
    margin-bottom: 1px;
    cursor: pointer;
    background-color: #7a6e6e;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.jd-toolbar-tab .tab-ico {
    width: 34px;
    height: 35px;
    margin-left: 1px;
    position: relative;
    z-index: 2;
    background-color: #7a6e6e;
    _display: block;
}

.jd-toolbar-tab .tab-ico {
    display: inline-block;
    background-image: url("../img/toolbars1.png");
    background-repeat: no-repeat;
}

.jd-toolbar-tab .tab-text {
    width: 62px;
    height: 35px;
    line-height: 35px;
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: "微軟雅黑";
    position: absolute;
    z-index: 1;
    left: 35px;
    top: 0px;
    background-color: rgb(122, 110, 110);
    border-radius: 3px 0px 0px 3px;
    /*移出動(dòng)畫效果*/
    transition: left 0.3s ease-in-out 0.1s;
}

.jd-toolbar-tab-hover {
    background-color: #c81623;
}

.jd-toolbar-tab-hover .tab-ico {
    background-color: #c81623;
}

.jd-toolbar-tab-hover .tab-text {
    left: -60px;
    background: #c81623;
}

.jd-toolbar-tab-hover .tab-texts {
    left: -108px;
    background: #c81623;
}
/* 根據(jù)自己的背景圖，修改背景位置。*/
.jd-tab-vip .tab-ico {
    background-position: -2px -45px;
}

.jd-tab-follow .tab-ico {
    background-position: -3px -86px;
}

.jd-tab-top .tab-ico {
    background-position: -4px -170px;
}

.jd-tab-vip img {
    margin-top: 1px;
}

JS
返回頂部添加顯示隱藏功能，可根據(jù)需求更改顯示隱藏效果。
$(function(){

//右側(cè)固定欄
    var $jdToolbar = $(".jd-global-toolbar .jd-toolbar-tab");
    $jdToolbar.hover(function(){
        //鼠標(biāo)移入添加class
        $(this).addClass("jd-toolbar-tab-hover");
    },function(){
        //鼠標(biāo)移除如果含有class，則移除
        if($(this).hasClass("jd-toolbar-tab-hover")){
            $(this).removeClass("jd-toolbar-tab-hover");
        }
    });

//返回頂部在一定高度內(nèi)隱藏
    $(window).scroll(function(){
        var docHe= $(window).scrollTop();
        var hideH = 600;
        if (docHe < hideH){
            $("#returnTop").slideUp(1000);
        }else{
            $("#returnTop").slideDown(1000);
        }
    })


//右側(cè)固定欄，返回頂部
    $("#returnTop").click(function () {
        var speed=200;//滑動(dòng)的速度
        //添加返回頂部的動(dòng)畫效果
        $("body,html").animate({ scrollTop: 0 }, speed);
        return false;
    });

})

如有問(wèn)題，歡迎大家交流指正。QQ：1357912285

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

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

相關(guān)文章

  • 模擬JD返回頂部功能

    摘要：模擬返回頂部功能，添加在一定高度內(nèi)隱藏功能。涵蓋的內(nèi)容主要前端樣式排版，展示效果動(dòng)畫，以及展示效果腳本的編寫編寫仿返回頂部留言客服頂部需要根據(jù)自己的背景圖，修改背景位置。返回頂部添加顯示隱藏功能，可根據(jù)需求更改顯示隱藏效果。 模擬JD返回頂部功能，添加在一定高度內(nèi)隱藏功能。 showImg(https://segmentfault.com/img/bV8M9m?w=1366&h=736...

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

  • Python 模擬京東登錄

    摘要：實(shí)現(xiàn)根據(jù)上面的分析我們只需要通過(guò)代碼發(fā)送一個(gè)請(qǐng)求，并且?guī)舷鄬?duì)應(yīng)的參數(shù)就可以實(shí)現(xiàn)登錄了。請(qǐng)輸入驗(yàn)證碼登錄功能正在趕來(lái)的路上，敬請(qǐng)期待。。。加入購(gòu)物車成功請(qǐng)輸入京東賬號(hào)請(qǐng)輸入京東密碼登錄成功登錄失敗項(xiàng)目地址模擬京東登錄吐槽群 Python模擬京東登錄 分析登錄的網(wǎng)絡(luò)請(qǐng)求 打開https://passport.jd.com/new/login.aspx，打開瀏覽器的調(diào)試面板，然后，輸入賬號(hào)...

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

  • 趁著雙11，寫個(gè)京東商品自動(dòng)下單

    摘要：項(xiàng)目地址求個(gè)在現(xiàn)在，商家一年不賣貨，雙賣出一年的貨是大家都知道的事實(shí)了，總得來(lái)說(shuō)調(diào)一調(diào)蚊子腿的價(jià)格，聊勝于無(wú)，但是也會(huì)有些神價(jià)格會(huì)出現(xiàn)，這時(shí)候買到就是賺到本來(lái)是想趁著雙組臺(tái)電腦，買個(gè)的板套裝，沒想到京東的一直是無(wú)貨的狀態(tài)，這幾天有貨了，價(jià)格 項(xiàng)目地址 求個(gè) star 在現(xiàn)在，商家一年不賣貨，雙11賣出一年的貨是大家都知道的事實(shí)了，總得來(lái)說(shuō)調(diào)一調(diào)蚊子腿的價(jià)格，聊勝于無(wú)，但是也會(huì)有些神價(jià)格...

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

  • 按照獎(jiǎng)品概率分布抽獎(jiǎng)的實(shí)現(xiàn)

    摘要：京東券電影票淘寶券代碼如下按照概率抽取一個(gè)獎(jiǎng)品返回獎(jiǎng)品所有獎(jiǎng)品的概率總和應(yīng)該為總概率基數(shù)方式二該方式如果直接看代碼比較難理解。 首發(fā)于 樊浩柏科學(xué)院 需求：首先用戶通過(guò)以一定方式（好友點(diǎn)贊等）開啟抽獎(jiǎng)資格，然后按照用戶 100% 中獎(jiǎng)概率進(jìn)行抽獎(jiǎng)，且系統(tǒng)的發(fā)放獎(jiǎng)品需要按照各個(gè)獎(jiǎng)品整體的期望中獎(jiǎng)比例來(lái)進(jìn)行分布，最后用戶抽中獎(jiǎng)品調(diào)用第三方發(fā)放接口發(fā)放獎(jiǎng)品并記錄保存，另有些獎(jiǎng)品存在發(fā)放數(shù)量...

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

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

0條評(píng)論

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