模拟JD返回顶部功能

KevinYan 发布于2019-08-30 15:53 / 413人阅读

摘要：模拟返回顶部功能，添加在一定高度内隐藏功能。涵盖的内容主要前端样式排版，展示效果动画，以及展示效果脚本的编写编写仿返回顶部留言客服顶部需要根据自己的背景图，修改背景位置。返回顶部添加显示隐藏功能，可根据需求更改显示隐藏效果。

模拟JD返回顶部功能，添加在一定高度内隐藏功能。

返回顶部的前端实现。涵盖的内容主要：前端样式（html排版），展示效果（CSS3 动画），以及展示效果脚本的编写（javascript编写）

HTML

CSS
需要根据自己的背景图，修改背景位置。

@charset "utf-8";
/**********************
 *CSS Animations by:
 * JD侧边栏
 * 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;
}
/* 根据自己的背景图，修改背景位置。*/
.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
返回顶部添加显示隐藏功能，可根据需求更改显示隐藏效果。

$(function(){

//右侧固定栏
    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");
        }
    });

//返回顶部在一定高度内隐藏
    $(window).scroll(function(){
        var docHe= $(window).scrollTop();
        var hideH = 600;
        if (docHe < hideH){
            $("#returnTop").slideUp(1000);
        }else{
            $("#returnTop").slideDown(1000);
        }
    })


//右侧固定栏，返回顶部
    $("#returnTop").click(function () {
        var speed=200;//滑动的速度
        //添加返回顶部的动画效果
        $("body,html").animate({ scrollTop: 0 }, speed);
        return false;
    });

})

如有问题，欢迎大家交流指正。QQ：1357912285

混合云超融合服务器 javascript返回顶部 html返回顶部菜单 html返回顶部浮动 js鼠标返回顶部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116714.html

模拟JD返回顶部功能

摘要：模拟返回顶部功能，添加在一定高度内隐藏功能。涵盖的内容主要前端样式排版，展示效果动画，以及展示效果脚本的编写编写仿返回顶部留言客服顶部需要根据自己的背景图，修改背景位置。返回顶部添加显示隐藏功能，可根据需求更改显示隐藏效果。模拟JD返回顶部功能，添加在一定高度内隐藏功能。 showImg(https://segmentfault.com/img/bV8M9m?w=1366&h=736...

xiongzenghui 2019-08-22 16:26 评论0 收藏0
模拟JD返回顶部功能

摘要：模拟返回顶部功能，添加在一定高度内隐藏功能。涵盖的内容主要前端样式排版，展示效果动画，以及展示效果脚本的编写编写仿返回顶部留言客服顶部需要根据自己的背景图，修改背景位置。返回顶部添加显示隐藏功能，可根据需求更改显示隐藏效果。模拟JD返回顶部功能，添加在一定高度内隐藏功能。 showImg(https://segmentfault.com/img/bV8M9m?w=1366&h=736...

liaosilzu2007 2019-08-05 13:36 评论0 收藏0
Python 模拟京东登录

摘要：实现根据上面的分析我们只需要通过代码发送一个请求，并且带上相对应的参数就可以实现登录了。请输入验证码登录功能正在赶来的路上，敬请期待。。。加入购物车成功请输入京东账号请输入京东密码登录成功登录失败项目地址模拟京东登录吐槽群 Python模拟京东登录分析登录的网络请求打开https://passport.jd.com/new/login.aspx，打开浏览器的调试面板，然后，输入账号...

894974231 2019-07-31 11:00 评论0 收藏0
趁着双11，写个京东商品自动下单

摘要：项目地址求个在现在，商家一年不卖货，双卖出一年的货是大家都知道的事实了，总得来说调一调蚊子腿的价格，聊胜于无，但是也会有些神价格会出现，这时候买到就是赚到本来是想趁着双组台电脑，买个的板套装，没想到京东的一直是无货的状态，这几天有货了，价格项目地址求个 star 在现在，商家一年不卖货，双11卖出一年的货是大家都知道的事实了，总得来说调一调蚊子腿的价格，聊胜于无，但是也会有些神价格...

Labradors 2019-08-21 17:22 评论0 收藏0
按照奖品概率分布抽奖的实现

摘要：京东券电影票淘宝券代码如下按照概率抽取一个奖品返回奖品所有奖品的概率总和应该为总概率基数方式二该方式如果直接看代码比较难理解。首发于樊浩柏科学院需求：首先用户通过以一定方式（好友点赞等）开启抽奖资格，然后按照用户 100% 中奖概率进行抽奖，且系统的发放奖品需要按照各个奖品整体的期望中奖比例来进行分布，最后用户抽中奖品调用第三方发放接口发放奖品并记录保存，另有些奖品存在发放数量...

Tamic 2019-07-01 11:02 评论0 收藏0