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

資訊專欄INFORMATION COLUMN

模擬JD返回頂部功能

xiongzenghui / 1493人閱讀

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

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

返回頂部的前端實現(xiàn)。涵蓋的內(nèi)容主要： 前端樣式（html排版），展示效果（CSS3 動畫），以及展示效果腳本的編寫（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;
    /*移出動畫效果*/
    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(){
        //鼠標移入添加class
        $(this).addClass("jd-toolbar-tab-hover");
    },function(){
        //鼠標移除如果含有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;//滑動的速度
        //添加返回頂部的動畫效果
        $("body,html").animate({ scrollTop: 0 }, speed);
        return false;
    });

})

如有問題，歡迎大家交流指正。QQ：1357912285

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

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

相關(guān)文章

  • 模擬JD返回頂部功能

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

    KevinYan 評論0 收藏0

  • Python 模擬京東登錄

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

    894974231 評論0 收藏0

  • 趁著雙11，寫個京東商品自動下單

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

    Labradors 評論0 收藏0

  • 按照獎品概率分布抽獎的實現(xiàn)

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

    Tamic 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<