可滑动的历史进程

最新推荐文章于 2023-03-25 16:05:28 发布
这个杀手好冷
最新推荐文章于 2023-03-25 16:05:28 发布
阅读量568
点赞数
分类专栏： javascript 文章标签： css html javascript
本文链接：https://blog.csdn.net/qq_43649479/article/details/121997625
版权
javascript 专栏收录该内容
22 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        .header {
            background-color: saddlebrown;
            height: 100px;
        }

        .progress-bar {
            width: 950px;
            margin: auto;
            padding-top: 70px;
        }

        .progress-bar .node {
            width: 24px;
            height: 24px;
            float: left;
            position: relative;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }

        .progress-bar .node .txt {
            position: absolute;
            font-size: 16px;
            top: -30px;
            width: 200px;
            text-align: center;
            left: 50%;
            margin-left: -100px;
        }

        .progress-bar .node .core {
            width: 18px;
            height: 18px;
            position: absolute;
            top: 3px;
            left: 3px;
            border-radius: 50%;
        }

        .progress-bar .node.active .core {
            background: #fff;
        }

        .progress-bar .line {
            float: left;
            height: 2px;
            background: rgba(255, 255, 255, 0.5);
            width: 100px;
            margin-top: 11px;
        }


        .history-content {
            height: 413px;
            background: #FBFBFB;
            color: #5F6464;
            overflow: hidden;
        }

        .en-us .history-content {
            height: 620px;
        }

        .history-main {
            width: 10000px;
            height: 501px;
            position: absolute;
        }

        .history-main-box {
            width: 384px;
            float: left;
            margin-right: 25px;
        }

        .history-title {
            font-size: 24px;
            padding-top: 40px;
            line-height: 36px;
            font-family: 'TencentSansw7';
            padding-bottom: 8px;
            border-bottom: 1px solid #D8D9DC;
            margin-bottom: 18px;
            color: #2A2E2E;
        }

        .history-main-box .li {
            line-height: 25px;
            margin-bottom: 18px;
            font-size: 14px;
        }

        .history-main-box .li .left {
            float: left;
            width: 40px;
            padding-right: 10px;
            text-align: right;
        }

        .history-main-box .li .right {
            width: 320px;
            float: left;
        }

        .history-content .mod-con {
            position: relative;
        }

        .clearfix-mission {
            display: none;
        }

        .history-button {
            display: none;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="progress-bar">
            <div class="node active" data-year="2021" index="0">
                <div class="txt">现在</div>
                <div class="core"></div>
            </div>
            <div class="line"></div>
            <div class="node" data-year="2019" index="1">
                <div class="txt">2019</div>
                <div class="core"></div>
            </div>
            <div class="line"></div>
            <div class="node" data-year="2018" index="2">
                <div class="txt">2018</div>
                <div class="core"></div>
            </div>
            <div class="line"></div>
            <div class="node" data-year="2017" index="3">
                <div class="txt">2017</div>
                <div class="core"></div>
            </div>
            <div class="line"></div>
            <div class="node" data-year="2016" index="4">
                <div class="txt">2016</div>
                <div class="core"></div>
            </div>
            <div class="line"></div>
            <div class="node" data-year="2015" index="5">
                <div class="txt">2015</div>
                <div class="core"></div>
            </div>
            <div class="line"></div>
            <div class="node" data-year="2011" index="6">
                <div class="txt">2011</div>
                <div class="core"></div>
            </div>
            <div class="line"></div>
            <div class="node" data-year="2005" index="6">
                <div class="txt">2005</div>
                <div class="core"></div>
            </div>
        </div>
    </div>
    <div class="history-content" style="height: 501px;">
        <div class="mod-con">
            <div class="history-main" style="left: 0px;">
                <div class="history-main-box" year="2021">
                    <div class="history-title">2021</div>
                    <div class="li">
                        <div class="left">2月</div>
                        <div class="right"> 防控疫情，共同行动--优芽学生健康监测管理平台免费发放</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">2月</div>
                        <div class="right"> 停课不停学，优芽在行动</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">2月</div>
                        <div class="right">福建优芽文化集团携手品质母亲、华心心理从“心”出发，为抗“疫”护航</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">11月</div>
                        <div class="right">优芽网荣获厦门市科学技术局智慧防疫和新模式应用示范工程项目奖励</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">全国中职班主任能力比赛圆满落幕</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">无锡校园创客节暨第五届无锡市中小学创客大赛圆满落幕</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">第三届厦门市中小学创客大赛圆满收官</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">莆田市第二届中小学校园创客节活动成功举办</div>
                        <div class="both"></div>
                    </div>
                </div>
                <div class="history-main-box" year="2019">
                    <div class="history-title">2019</div>
                    <div class="li">
                        <div class="left">1月</div>
                        <div class="right">中小学生综合素质评价平
                            台正式上线；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">4月</div>
                        <div class="right">小记者研学活动平台上线；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">5月</div>
                        <div class="right">与厦门市教育局共同举办
                            厦门市第二届中小学生创客大赛；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">6月</div>
                        <div class="right">携手福建教育学院成功举
                            办福建省2019年执业院校德育工
                            作者专业化成长专题培训；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">7月</div>
                        <div class="right">携手广东省中职德育研究
                            会举办广东省中等执业学校公共
                            基础课（德育课）信息化教学能
                            力提升活动；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">8月</div>
                        <div class="right">心育成长平台上线。</div>
                        <div class="both"></div>
                    </div>
                </div>
                <div class="history-main-box" year="2018">
                    <div class="history-title">2018</div>
                    <div class="li">
                        <div class="left">3月</div>
                        <div class="right">人人出彩活动平台上线；
                        </div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">5月</div>
                        <div class="right">与厦门市教育局共同举办首届厦门中小学创客动漫大赛；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">5月</div>
                        <div class="right">正式获得“情景交互式动画制作与播放”专利；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">5月</div>
                        <div class="right">代表福建馆亮相第三届全国基础教育信息化应
                            用展示交流活动，孙春兰副总理一行莅临体验，优芽
                            动漫创客产品深受好评；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">6月</div>
                        <div class="right">携手福建省职教中心，协办“福建省中职学校
                            班主任基本功竞赛”；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">6月</div>
                        <div class="right">顺利通过ISO9001质量管理体系认证；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">7月</div>
                        <div class="right">河北省中职德育诊断与改进平台正式上线；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">9月</div>
                        <div class="right">被两岸教育行业论坛授予“杰出游学研学教育机构”；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">10月</div>
                        <div class="right">获得国家级高新技术企业认定资质称号。</div>
                        <div class="both"></div>
                    </div>
                </div>
                <div class="history-main-box" year="2017">
                    <div class="history-title">2017</div>
                    <div class="li">
                        <div class="left">5月</div>
                        <div class="right">成功入围“山东省学校创客
                            空间项目资源库”首批入选名单；　</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">7月</div>
                        <div class="right">学校成长平台上线，开启德
                            育创新体系建设新纪元；　</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">7月</div>
                        <div class="right">成功举办首届全国职业院校
                            德育创新建设方案专家评审会，获
                            得一致好评；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">9月</div>
                        <div class="right">互动电影中标成为广东省教
                            师微课教学指定工具；　</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">10月</div>
                        <div class="right">优芽网注册用户超过200万；
                        　</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">中标入选广州市教育“德
                            育活动”策划及执行方案服务商。</div>
                        <div class="both"></div>
                    </div>
                </div>
                <div class="history-main-box" year="2016">
                    <div class="history-title">2016</div>
                    <div class="li">
                        <div class="left">1月</div>
                        <div class="right">福建优芽文化集团有限公司成立；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">3月</div>
                        <div class="right">互动电影正式入驻国家教育资源公
                            共服务平台；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">5月</div>
                        <div class="right">与教育部合作，协办“中国教育网
                            络与信息安全工作研讨会”；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">11月</div>
                        <div class="right">优芽网注册用户超过50万；
                        </div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">优芽教育、优梓文化、优幕技术、
                            优苹教育等子公司成立；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">被厦门市科学技术局认定为优芽众
                            创空间。</div>
                        <div class="both"></div>
                    </div>
                </div>
                <div class="history-main-box" year="2015">
                    <div class="history-title">2015</div>
                    <div class="li">
                        <div class="left">3月</div>
                        <div class="right">便捷动画工具互动电影上线，开创文化创意
                            体系建设新纪元；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">6月</div>
                        <div class="right">互动电影在“全国职业院校教师技能大赛”
                            中作为微课制作工具广泛应用；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">10月</div>
                        <div class="right">互动电影亮相“第69届中国教育装备展”，获
                            重点关注；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">加入国际互联网教育联盟；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">互动电影在“互联网+教材”的应用，共获
                            新浪、腾讯等十余家媒体推荐；</div>
                        <div class="both"></div>
                    </div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">互动电影首次入驻省级平台--福建省教育
                            资源公共服务平台。</div>
                        <div class="both"></div>
                    </div>
                </div>
                <div class="history-main-box" year="2011">
                    <div class="history-title">2011</div>
                    <div class="li">
                        <div class="left">12月</div>
                        <div class="right">厦门优芽网络科技有限
                            公司成立，优芽破土萌芽。</div>
                        <div class="both"></div>
                    </div>
                </div>
                <div class="history-main-box" year="2005">
                    <div class="history-title">2005</div>
                    <div class="li">
                        <div class="left">8月</div>
                        <div class="right">创办厦门网中网软件有限公司已
                            成为职教财会仿真软件领域的领先者。</div>
                        <div class="both"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    function a() {
        var minX = { number: 999999, object: null };
        $('.history-main-box').each(function () {
            console.log(Math.abs($(this).offset().left));
            console.log( $('.history-content .mod-con').offset().left);

            if (minX.number > Math.abs($(this).offset().left - $('.history-content .mod-con').offset().left)) {
                minX.number = Math.abs($(this).offset().left - $('.history-content .mod-con').offset().left);
                minX.object = this;
            }
        });
        $('.progress-bar .node').each(function (index) {
            if ($(this).data('year') == $(minX.object).attr('year')) {
                $('.progress-bar .node').removeClass('active')
                $(this).addClass('active')
            }
        });


        var bi = (Math.abs($('.history-main').css('left').split('px')[0]) / (($('.history-main-box').width() + $('.history-main-box').css('margin-right').split('p')[0] * 1) * ($('.history-main-box').length - 1)));

        $('.history-button .focus').css('width', bi * 100 + '%');
    }

    $('.mod-con .history-main').mousedown(function (e) {
        var positionDiv = $(this).offset();
        var distenceX = e.pageX;
        var startX = $('.mod-con .history-main')[0].style.left.split('px')[0] * 1;
        $(document).mousemove(function (e) {
            var x = startX + (e.pageX - distenceX);
            if (x > 0) {
                x = 0;
            }
            if (x < -(($('.history-main-box').width() + $('.history-main-box').css('margin-right').split('p')[0] * 1) * ($('.history-main-box').length - 1))) {
                x = -(($('.history-main-box').width() + $('.history-main-box').css('margin-right').split('p')[0] * 1) * ($('.history-main-box').length - 1));
            }
            $('.mod-con .history-main').css({
                'left': x + 'px',
            });
            a();
        });

        $(document).mouseup(function () {
            $(document).off('mousemove');
        });
    });

    $('.mod-con .history-main')[0].ontouchstart = function (e) {

        var positionDiv = $(this).offset();
        var distenceX = e.touches[0].pageX;
        var startX = $('.mod-con .history-main')[0].style.left.split('px')[0] * 1;
        $(document)[0].ontouchmove = function (e) {
            var x = startX + (e.touches[0].pageX - distenceX);
            if (x > 0) {
                x = 0;
            }
            if (x < -(($('.history-main-box').width() + $('.history-main-box').css('margin-right').split('p')[0] * 1) * ($('.history-main-box').length - 1))) {
                x = -(($('.history-main-box').width() + $('.history-main-box').css('margin-right').split('p')[0] * 1) * ($('.history-main-box').length - 1));
            }
            $('.mod-con .history-main').css({
                'left': x + 'px',
            });
            a();
        }

        $(document)[0].ontouchend = function () {
            $(document)[0].ontouchmove = function () { };
        }
    }



    function activeHistory(key) {
        var yearEle = $('[year="' + key + '"]');

        var left = 0;

        if (yearEle.offset()) {
            let curretYearOffset = $('[year="' + 2021 + '"]').offset() ? $('[year="' + 2021 + '"]').offset().left : $('[year=2020]').offset().left;
            left = $('[year="' + key + '"]').offset().left - curretYearOffset;
        }

        $('.history-main').css({ 'left': '-' + left + 'px' });

        $('.progress-bar .node').each(function (index) {
            if ($(this).data('year') == key) {
                $('.progress-bar .node').removeClass('active')
                $(this).addClass('active')
            }
        });
        a();
    }
    $('.progress-bar .node').each(function (index) {
        $(this).attr('index', index)
        $(this).click(function () {
            activeHistory($(this).data('year'))
        });
    })
</script>

</html>
这个杀手好冷
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
可滑动的历史进程

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...
复制链接

扫一扫
专栏目录