伸缩自如的时光轴实现——改进版

2023-05-16

上回讲到的是时光轴“伸缩自如”的实现，如果基于响应式制作的话，可能存在着许多潜在的BUG。如：窗口变化时，时光轴的”收起“和”展开“，都发生了一些变形。为此，对原来的 timeline.js 进行了改进，Demo的效果仍与此前一致，没有多大的区别。

但是却了基于响应式进行操作，而不发生一些奇葩的结果。

改进版 timeline.js

/**
 * Created by DreamBoy on 2016/5/1.
 */
$(function() {
    $.fn.initPutAway = function () {
        $(this).each(function() {
            initTimeLine(this);
        });

        //对 每一个条时间轴上的“收起”按钮 初始化
        function initTimeLine(putAwayBtn) {
            var timeline = $(putAwayBtn).parents('.vertical-timeline');
            //对应时光轴上的“时间点”
            var timelineChild = timeline.children('.vertical-timeline-block');
            //对应时光轴上的“时间点”个数
            var len = timelineChild.length;
            //保存各“时间点”的高度；//对应时光轴的总高度
            var hArr = [], totalH;

            $(putAwayBtn).on('click', function () {
                if($(this).html() == "收起") {
                    if(len > 1) { //要先判断是否有子元素可以收缩，如果没有的话，只是改变按钮的内容为“展开”
                        for(var i = 0; i < len; i++) {
                            hArr[i] = $(timelineChild[i]).outerHeight();
                        }
                        totalH = timeline.outerHeight();

                        //设置收起时间轴后时间轴的高度
                        var top = $(timelineChild[0]).css("top");
                        if(top == 'auto') {
                            top = 30;
                        }

                        //需要设置收起后时光轴（vertical-timeline）的高度，并进行设置
                        //（因为子元素将进行position absolute定位，在父容器中不占位置。为使父容器撑开应该提前计算好高度并进行设置）
                        var h1 = top + 50 * len;
                        var h2 = totalH; //除去除第一个 时间点 的所有时间点高度
                        for(var i = 1; i < len; i++) {
                            h2 -= $(timelineChild[i]).outerHeight();
                        }
                        var ph = h1 >= h2 ? h1 : h2;
                        timeline.outerHeight(ph);

                        //设置时间轴上各“时间点”收缩后的位置，根据top进行设置
                        var h = hArr[0];
                        $.each(timelineChild, function(i) {
                            if(i == 0) {
                                //不对时间轴上的第一个“时间点”进行position设置
                                $(this).css("z-index", 1000);
                            } else {
                                top += 50;
                                var _this = $(this);
                                // 注意：这里必须先将position设置为absolute。（因为设置了position为absolute，top属性设置才有效果）
                                // 那么设置了position，同样就必须定义top属性的初始值，
                                // 否则，会按默认没有top进行显示，为保证在开始移动前，它还在“原来”的地方，就需要计算它的top值。
                                _this.css({"position" : "absolute", "top" : h});
                                _this.animate({"top" : top});

                                _this.children(".vertical-timeline-content").animate({"opacity" : 0}, function() {
                                    $(this).css("display", "none"); //隐藏对应时间点的内容
                                });

                                h += hArr[i];
                            }
                        });
                    }

                    $(this).html("展开");
                } else if($(this).html() == "展开"){
                    if(len > 1) { //要先判断是否有子元素可以展开，如果没有的话，只是改变按钮的内容为“收起”
                        var top = totalH;

                        //设置展开时间轴之后时间轴的高度
                        timeline.outerHeight(totalH);

                        for(var i = len - 1; i >= 0; i--) {
                            if(i == 0) {
                                //不对时间轴上的第一个“时间点”进行关于position操作
                                $(timelineChild[i]).css("z-index", 0);
                            } else {
                                top -= hArr[i];
                                var _this = $(timelineChild[i]);
                                _this.animate({"top" : top});

                                //判断是否是最后一个，如果是的话负责把 timeline时间轴 的高度设置为 100%，达到自适应的效果
                                if(i == 1) {
                                    _this.children(".vertical-timeline-content").css("display", "block").animate({"opacity" : 1}, function() {
                                        //修改为 relative 定位，方便“占位”。
                                        $(this).parents('.vertical-timeline-block').css({"position": "relative", "top" : 0});
                                        timeline.outerHeight("100%");
                                    });
                                } else {
                                    _this.children(".vertical-timeline-content").css("display", "block").animate({"opacity" : 1}, function() {
                                        //修改为 relative 定位，方便“占位”。
                                        $(this).parents('.vertical-timeline-block').css({"position": "relative", "top" : 0});
                                    });
                                }
                            }
                        }
                    }

                    $(this).html("收起");
                }
            });
        }
    }
});

timeline.css

.vertical-timeline {
    color: #FFF;
    font-family: "微软雅黑", "Microsoft YaHei";
    position: relative;
}

.vertical-timeline-block {
    border-left: 2px solid #DDD;
    position: relative;
    padding-bottom: 30px;
    width: 100%;
    cursor: pointer;
}

/* 时间轴的左侧图标 */
.vertical-timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: -22px;
    top: 10px;
    z-index: 1000;

    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
}

.vertical-timeline-block:hover .vertical-timeline-icon {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    line-height: 50px;
    left: -27px;
    box-shadow: 0 0 5px #CCC;
    font-size: 25px;
}

/* 时间轴的左侧图标的各种样式 */
.v-timeline-icon1 {
    background-color: #2aabd2;
}
.v-timeline-icon2 {
    background-color: #5cb85c;
}
.v-timeline-icon3 {
    background-color: #8c8c8c;
}
/* 时间轴的左侧图标上的序号*/
.vertical-timeline-icon i {
    font-style: normal;
    color: #FFF;
}
/* 时间轴上的具体内容 */
.vertical-timeline-content {
    background-color: #5bc0de;
    margin-left: 60px;
    padding: 20px 30px;
    border-radius: 5px;
    position: relative;
}
/* 时间轴上的具体内容左侧箭头 */
.vertical-timeline-content:before {
    content: '';
    width: 0;
    height: 0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #5bc0de;
    border-left: 10px solid transparent;

    position: absolute;
    right: 100%;
    top: 20px;
}
/* 时间轴的具体内容的格式 */
.timeline-content {
    text-indent: 2em;
}
.time-more {
    overflow: hidden;
}
.time-more .time {
    float: left;
    line-height: 40px;
    display: inline-block;
}
.time-more .more {
    float: right;
}
.time-more .more a {
    display: inline-block;
    height: 20px;
    padding: 8px 15px;
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
}
/* “更多信息”的风格 */
.more-style1 {
    border-radius: 5px;
    background-color: #565656;
}
.more-style1:hover {
    background-color: #696969;
}
.more-style2 {
    border-radius: 5px;
    background-color: #1AB394;
}
.more-style2:hover {
    background-color: #18A689;
}

.more-style3 {
    border-radius: 5px;
    background-color: #1C84C6;
}
.more-style3:hover {
    background-color: #1A7BB9;
}

/*时光轴对应的标题*/
.vtb-tit {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;

    background-color: #1A7BB9;
    border-radius: 5px;

    position: absolute;
    left: -150px;
    top: 10px;
}

/*收起按钮的样式*/
.timeline-putAway {
    position: absolute;
    right: -80px;
    top: 10px;
}

.putAway-btn {
    border: none;
    outline: none;
    height: 30px;
    padding: 8px 15px;
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
}
.putAway-btn:hover {
    background-color: #2aabd2;
}

Demo 案例：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时光轴</title>
    <link rel="stylesheet" href="timeline.css">
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="vertical-timeline">
        <div class="vtb-tit">
            总时间点1
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon1">
                <i class="icon">1</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style1"><a href="#">更多信息</a></span>
                </p>
            </div>

            <div class="timeline-putAway">
                <button type="button" class="putAway-btn">收起</button>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon2">
                <i class="icon">2</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点2</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style2"><a href="#">更多信息</a></span>
                </p>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon3">
                <i class="icon">3</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点3</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style3"><a href="#">更多信息</a></span>
                </p>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon1">
                <i class="icon">4</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon2">
                <i class="icon">5</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon3">
                <i class="icon">6</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon3">
                <i class="icon">7</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
            </div>
        </div>
    </div>

    <div class="vertical-timeline">
        <div class="vtb-tit">
            总时间点2
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon1">
                <i class="icon">1</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style1"><a href="#">更多信息</a></span>
                </p>
            </div>

            <div class="timeline-putAway">
                <button type="button" class="putAway-btn">收起</button>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon3">
                <i class="icon">3</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点3</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style3"><a href="#">更多信息</a></span>
                </p>
            </div>
        </div>
    </div>

    <div class="vertical-timeline">
        <div class="vtb-tit">
            总时间点3
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon1">
                <i class="icon">1</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style1"><a href="#">更多信息</a></span>
                </p>
            </div>

            <div class="timeline-putAway">
                <button type="button" class="putAway-btn">收起</button>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon2">
                <i class="icon">2</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点2</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style2"><a href="#">更多信息</a></span>
                </p>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon3">
                <i class="icon">3</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点3</h2>
                <p class="timeline-content">我去吃了个午饭</p>
                <p class="time-more">
                    <span class="time">2016/4/30 13:48</span>
                    <span class="more more-style3"><a href="#">更多信息</a></span>
                </p>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon1">
                <i class="icon">4</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon2">
                <i class="icon">5</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
            </div>
        </div>

        <div class="vertical-timeline-block">
            <div class="vertical-timeline-icon v-timeline-icon3">
                <i class="icon">6</i>
            </div>

            <div class="vertical-timeline-content">
                <h2>时间点1</h2>
                <h2>时间点1</h2>
                <h2>时间点1</h2>
            </div>
        </div>
    </div>
</div>

<script src="jquery-1.11.1.min.js"></script>
<script src="timeline.js"></script>
<script>
    $(function() {
        //进行初始化
        $('.putAway-btn').initPutAway();
    });
</script>
</body>
</html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

伸缩自如的时光轴实现

伸缩自如的时光轴实现——改进版的相关文章

php get_magic_quotes_gpc()函数用法介绍

转载自 xff1a 点击打开链接 magic quotes gpc函数在php中的作用是判断解析用户提示的数据 xff0c 如包括有 post get cookie过来的数据增加转义字符 xff0c 以确保这些数据不会引起程序 xff0c
PHP 单一入口

转载自 xff1a 点击打开链接单一入口概述单一入口的应用程序就是说用一个文件处理所有的HTTP请求 xff0c 例如不管是列表页还是文章页 xff0c 都是从浏览器访问index php文件 xff0c 这个文件就是这个应用程序的单一
PHP下的MVC

学习资源来自于慕课网先来一个简单的Demo SimpleDemo 控制器C testController class php lt php class testController function show 控制器的作用是调用模型 xf
PHP操作mysql类的封装

版本一 xff1a lt php 这是一个工具类 xff0c 作用是完成对数据库的操作 class SqlHelper public conn public dbname 61 34 test 34 public username 61 3
简单新闻发布系统前台界面（html+css）

运行效果如下 xff1a 图片素材 xff1a bg jpg header shadow png news icon png index html lt DOCTYPE html gt lt html lang 61 34 zh CN 34
视图引擎Smarty的简单使用

参考 xff1a http www jb51 net article 5091 htm 参考 xff1a http baike baidu com link url 61 FFySw2r dsE lTdQgGy2DpLhciXM JqUag
简易文章发布系统——后台管理系统

来自于慕课网的学习这里建立一个简易的文章发布系统后台管理系统 xff0c 功能包括文章的发表查看文章列表 xff0c 其中还提供对文章的删除和修改功能首先使用mysql建立数据库 info xff0c 在info数据库中建立一张
简易文章发布系统——前台界面

续简易文章发布系统后台管理系统源自慕课网的学习关于简易文章发布系统后台管理系统大致已经制作完毕 xff0c 但是从安全方面来看 xff0c 程序质量不高 xff0c 只适合初学者进行学习开发 xff0c 掌握php的开发流程
PHP实现页面静态化——全部纯静态化

先来看看php在服务器的执行过程 xff1a 当用户请求服务器php文件的时候 xff0c 服务器将对php文件进行语法分析 xff0c 其次是解析 xff0c 最后才运行当php文件有内容输出时 xff0c 该内容会先经过服务器的php
PHP实现页面静态化——局部动态化

上回说到 xff1a PHP实现页面静态化全部纯静态化这次实现PHP的局部动态化 xff0c 也就是说静态化的页面存在动态过程 xff0c 结合全部静态化技术 43 Ajax技术实现局部动态化 xff0c 局部更新页面在上文的数据
CSS3的过渡 transition

这里只考虑 chrome 的兼容 transition html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 3
CSS3中的3D旋转 rotate、3D位移 translate

这里只考虑 chrome 的兼容 3DrotateDemo html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8
CSS3让登陆面板旋转起来

这里只考虑chrome的兼容 LoginRotate html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34
CSS3 卡片翻转(transform)

这里只考虑chrome的兼容 card1 html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt
他们的CSS3 3D正方体

摘自 xff1a 程旭元所分享的程序效果图如下 xff1a cube html lt DOCTYPE html gt lt html lang 61 34 zh CN 34 gt lt head gt lt title gt 3D正方体
html自定义复选框

自定义复选框的素材 xff1a icon check circle png icon checked png checkbox html xff08 为了方便起见 xff0c 这里使用到了jQuery xff09 lt DOCTYPE ht
CSS3的基本介绍

知识点记录 xff1a 1 圆角效果 border radius 如 xff1a border radius 10px 所有角都使用半径为10px 的圆角 border radius 5px 4px 3px 2px 四个半径值分别是左上角

随机推荐

CSS3选择器（上）

1 属性选择器 E att 61 val 选择匹配元素 E xff0c 且 E元素定义了属性 att xff0c 其属性值以 val开头的任何字符串 E att 61 val 选择匹配元素 E xff0c 且 E元素定义了属性 att xf
CSS3实现曲线阴影和翘边阴影

效果图如下 xff1a index html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt ti
THINKPHP 数据操作方法

一 ThinkPHP Insert 添加数据 ThinkPHP 内置的 add 方法用于向数据表添加数据 xff0c 相当于 SQL 中的 INSERT INTO 行为添加数据 add 方法是 CURD xff08 Create Upda
PHP文件上传的实现及其介绍

关于实现及介绍在程序注释中提交文件的页面 xff1a xff08 可以分别提交到doAction php doAction1 php doAction2 php进行测试 xff09 upload php lt doctype html g
PHP单文件上传的过程化函数封装

提交文件的页面 xff1a upload php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt
PHP的单个文件上传、多个单文件上传、多文件上传

单文件上传 upload1 php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title g
PHP实现单文件上传、多个单文件上传、多文件上传的过程化封装

上回提到 PHP的单个文件上传多个单文件上传多文件上传这里给出三种方式的统一实现下面先给出各种方式的文件提交页面 xff1a 单个文件上传 upload1 php lt doctype html gt lt html lang 6
PHP的单文件上传类

提交单文件的页面 upload php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title
PHP的多文件上传类

提交表单的页面 upload php lt doctype html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt title
Nginx负载均衡配置实例详解

转载自 xff1a http www php100 com html program nginx 2013 0905 5525 html 负载均衡是我们大流量网站要做的一个东西 xff0c 下面我来给大家介绍在Nginx服务器上进行负载均衡
基于Bootstrap使用jQuery实现简单可编辑表格

editTable js 提供编辑表格当前行添加一行删除当前行的操作 xff0c 其中可以设置参数 xff0c 如 xff1a operatePos 用于设置放置操作的列 xff0c 从0开始 xff0c 1表示以最后一列作为放置操作的
ThinkPHP 大D方法思想下的JDBC操作数据库D类

这里我封装出来的D 类 xff0c 是根据 ThinkPHP 中的 D 方法中做出来的 xff0c 其中有些出入的地方 xff0c 我进行了一些个性化的修正 xff0c 如 xff1a ThinkPHP 中操作数据库时 xff0c 需要在配
基于MVC设计模式实现简单PHP框架（雏形）-初期

xff08 记住 xff1a 这里只是提供思考的过程 xff09 其实这里只是一个我们课的Web实验课程设计题目统计系统 xff0c 在做实验的过程中起初只是想往MVC靠拢而已 xff0c 却不知不觉地实现了基于MVC的简单框架的雏形
Rocketmq入门介绍

目录一 Rocketmq优势二 Rocketmq与其他MQ对比三 MQ基本概念四 RocketMQ的4个组件五集群部署结构工作流程 xff1a 模块功能特性 xff1a Nameserver Broker 生产者 Produc
我的简单PHP框架——LabPHP

就我上次提到的基于MVC设计模式实现简单PHP框架 xff08 雏形 xff09 初期这次列出我实现的LabPHP简易框架 xff0c 该框架中没有使用任何的模板引擎 xff0c 所以说要在模板中使用到php变量的话 xff0c 仍然需
我的LabPHP框架的Demo应用——课程设计题目统计系统

1 界面制作 xff08 为了方便起见 xff0c 这里我采用了Bootstrap 框架制作界面 xff09 xff1b 2 数据库设计 xff0c 正确创建students 表 xff1b admin表 xff1a 3 项目目录结构如下
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

注意这里要求使用到Bootstrap框架的输入框组 xff0c 如 xff1a lt div class 61 34 row 34 gt lt div class 61 34 col lg 6 34 gt lt div class 61 3
网页中时光轴的简单实现

时光轴效果如下 xff1a 鼠标滑过当前项时 xff0c 左侧图标大小变大 xff1a index html lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta
伸缩自如的时光轴实现

上回说到简单时间轴的实现 xff0c 这一次针对上回的实现的时光轴 xff0c 增加时光轴收起的功能为了方便重用 xff0c 我分离css样式和js 使用过程中主要注意一下尽量使用css定义的时光轴样式即可时光轴收起功能的实现过程可以查
伸缩自如的时光轴实现——改进版

上回讲到的是时光轴伸缩自如的实现 xff0c 如果基于响应式制作的话 xff0c 可能存在着许多潜在的BUG 如 xff1a 窗口变化时 xff0c 时光轴的收起和展开 xff0c 都发生了一些变形为此 xff0c 对原来的 t

伸缩自如的时光轴实现——改进版

伸缩自如的时光轴实现——改进版 的相关文章

随机推荐

热门标签

伸缩自如的时光轴实现——改进版的相关文章