JS +JQuery实现时间轴卡尺

最新推荐文章于 2024-05-10 09:41:52 发布
最新推荐文章于 2024-05-10 09:41:52 发布
阅读量750 收藏 1
点赞数
分类专栏： CSS JavaScript 文章标签： jquery javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37024887/article/details/122063885
版权 
<!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>时间轴</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    html {
        background-color: #010;
    }

    * {
        margin: 0;
        padding: 0;
    }

    ul,
    ol,
    li {
        list-style: none !important;

    }

    .timeline {
        margin: 4rem auto;
        border: 1px dashed rgba(133, 133, 133, 0.705);
        width: 30rem;
        height: 4rem;
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        display: -webkit-box;
        color: #00FFFF;
    }

    .timeline li {
        width: 2.5rem;
        height: 100%;
        font-size: .7rem;
        position: relative;
        cursor: pointer;
        float: left;
        flex-shrink: 0;
        overflow-y: visible;
    }

    .timeline li .date {
        width: 100%;
        height: calc(100% - 1.2rem);
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 0.3rem;
        border-left: 0.02rem solid #0ff;
    }

    .timeline li .hour {
        width: 100%;
        height: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        position: absolute;
        bottom: 0.9rem;
        left: 0;
        border-left: 0.02rem solid #0ff;
        border-bottom: 0.02rem solid #0ff;
    }

    .timeline li.act .hour {
        background: rgba(0, 255, 255, .2);
    }

    .timeline li.act .icon {
        display: inline;
        position: absolute;
        bottom: 0.2rem;
        left: 0;
        right: 0;
        margin: auto;
        height: 0.4rem;
        width: 0.1rem;
        border-width: 0.45rem;
        border-color: transparent transparent #00FFFF transparent;
        border-style: solid;
    }


    /* chrome & safari 浏览器 */
    /*滚动条整体部分的底色*/
    .timeline::-webkit-scrollbar {
        width: 2px;
        height: 2px;
        background-color: transparent;
    }

    .timeline::-webkit-scrollbar:hover {
        cursor: pointer;
    }

    .timeline::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 8px;
    }


    /*滑动轨道*/
    .timeline::-webkit-scrollbar-track-piece {
        /* background-color: palevioletred; */
    }

    .timeline::-webkit-scrollbar-track-piece:hover {
        cursor: pointer;
        /* background-color: blue; */
    }

    /* 竖向滚动条滑块按钮*/
    .timeline::-webkit-scrollbar-thumb:vertical {
        height: 2px;
        border-radius: 5px;
        /* background: transparent; */
    }

    /* 横向滚动条滑块按钮*/
    .timeline::-webkit-scrollbar-thumb:horizontal {
        height: 2px;
        background: transparent;
        border-radius: 10px;
    }

    /*滚动条的上下两端的按钮*/
    .scrollbar::-webkit-scrollbar-button {
        height: 10px;
        background-color: transparent;
    }


    /* IE 浏览器 */
    .timeline {
        /*三角箭头的颜色*/
        scrollbar-arrow-color: transparent;
        /*滚动条滑块按钮的颜色*/
        scrollbar-face-color: transparent;
        /*滚动条整体颜色*/
        scrollbar-highlight-color: transparent;
        /*滚动条阴影*/
        scrollbar-shadow-color: transparent;
        /*滚动条轨道颜色*/
        scrollbar-track-color: transparent;
        /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
        scrollbar-3dlight-color: transparent;
        /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
        scrollbar-darkshadow-color: transparent;
        /*滚动条基准颜色*/
        scrollbar-base-color: transparent;


        /* 火狐浏览器 */
        scrollbar-color: transparent transparent;
        scrollbar-width: thin;
    }
</style>

<body>
    <div>
        <ul class="timeline" id="timeline">
            <li class="act date-li">
                <div class="date">2日</div>
                <div class="hour">9</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">10</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">11</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">12</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">13</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">14</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">15</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">16</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">17</div>
            </li>
            <li>
                <div class="hour">18</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">19</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">20</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">21</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">22</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">23</div>
                <div class="icon"></div>
            </li>
            <li class="date-li">
                <div class="date">3日</div>
                <div class="hour">0</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">1</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">2</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">3</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">4</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">5</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">6</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">7</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">8</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">9</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">10</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">11</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">12</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">13</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">14</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">15</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">16</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">17</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">18</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">19</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">20</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">21</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">22</div>
                <div class="icon"></div>
            </li>
            <li>
                <div class="hour">23</div>
                <div class="icon"></div>
            </li>
        </ul>
    </div>

</body>
<script type="text/javascript">
    var drag = function (obj) {
        obj.bind("mousedown", start);
        function start(event) {
            if (event.button == 0) {//判断是否点击鼠标左键  
                startX = event.clientX;
                initScrollX = obj.scrollLeft();  // scroll的初始位置
                //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的  
                $(document).bind("mousemove", move);
                //此处的$(document)可以改为obj  
                $(document).bind("mouseup", stop);
            }
            return false;//阻止默认事件或冒泡  
        }
        function move(event) {
            let diff = event.clientX - startX; // 鼠标移动的相对距离
            obj.scrollLeft(initScrollX - diff);
            return false;//阻止默认事件或冒泡  
        }
        function stop() {
            //解绑定，这一步很必要，前面有解释  
            $(document).unbind("mousemove", move);
            $(document).unbind("mouseup", stop);
        }
    }
    obj = $("#timeline");
    drag(obj);//传入的必须是jQuery对象，否则不能调用jQuery的自定义函数  

    $('.timeline').children('li').click(function () {
        $(this).siblings().removeClass('act')
        $(this).addClass('act')
    })
</script>

</html>

在这里插入图片描述
可以横向拖拽

五花漏
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
时间轴插件完善，大事记清晰美观
Joyce Luo的专栏
10-09 4510
经过前几次产品版本的发本，每次看到写的升级日志就头大，所以这里就利用时间轴插件实现一下这个升级日志的记录，方便查看！好啦，直接上代码：/** * 初始化时间轴数据展示 * * @param {} data 时间轴数据对象 */ function initTimeAxis(data){ var timeAxisHtml = '' + data.name + ''; $.each(dat
Jquery实现的几款漂亮的时间轴
weixin_30239339的博客
01-22 475
一、纵向折叠时间轴 1、js文件（jQuery.js或者jQuery.min.js） 2、CSS文件 View Code 3、HTML代码 View Code 4、运行效果： 二、纵向鼠标滑动时间轴 1、js文件（jquery.js和jquery.mousewheel.js,jquery.easing.js,自定义history.js） （1）jquery.mousewh...
横向时间轴插件_js_时间轴_
10-02
一个javascript做的时间轴插件，初学习js的可以看看
制作时间线的神器：chronoline.js
最新发布
gitblog_00036的博客
05-10 391
制作时间线的神器：chronoline.js 项目地址:https://gitcode.com/StoicLoofah/chronoline.js 项目介绍 chronoline.js 是一个强大的JavaScript库，专门用于将事件以时间轴的形式展示在水平的时间尺度上。想要一睹它的魅力？只需访问演示页面即可。 该项目仅依赖于raphael.js，而jQuery则用于提供更友好的提示框（通过qT...
Vue.js 实现时间轴功能
qq_37236395的博客
11-28 5368
GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key="index"> <div class="axis-item-tick" .
15个最好的jQuery timeline插件
thewebcode
07-07 1879
根据这里列出的jQuery timeline【jQuery时间轴】插件列表，您可以选择一个插件添加到您的网页，来增强您的网站的互动性。 实际上，当Facebook决定将它添加到他们的网站设计上，timeline就已经得到了普及。这是一个最好的方式在某段时间段来显示某件事件，比如从媒体的更新到历史的时间，都可以应用这类的效果。我们还可以在一些创意的展示中看到这种效果。这也是代理商展示他们的历史...
推荐5款实用的jQuery时间轴插件
weixin_30652491的博客
12-01 3442
1、使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴，它由上部水平滑块和下部时间点对应的内容区块，点击时间轴上的时间点，下部内容会滑动到对应的内容区块。使用CSS3和jQuery技术使得时间轴滑块可以左右滑动，非常强大。 详情：查看详情 2、HTML5+CSS3实现的响应式垂直时间轴 网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
Three.JS+原生JS+jQuery实现3D机房
10-09
总的来说，"Three.JS+原生JS+jQuery实现3D机房"项目展示了WebGL和JavaScript在构建交互式3D应用中的强大能力。开发者可以利用这些工具和技术，创造出各种具有实际业务功能的3D可视化场景。无论是对于展示数据中心的...
JavaScript+jQuery实现途乐行（旅游型）htm页面
05-12
在本项目中，"JavaScript+jQuery实现途乐行（旅游型）htm页面"是一个学生实践课程的成果，旨在创建一个旅游类的网页应用。这个项目的核心是利用HTML、JavaScript和jQuery来构建用户友好的交互界面，提供丰富的旅游...
jQuery水平横向时间轴历程代码
06-24
jQuery水平横向时间轴历程代码是一款带有左右箭头控制的高亮显示入职经历时间轴代码。
JS时间轴插件
09-26
款基于Jquery的时间轴插件 利用数组排序方式重置item位置 完全抛弃之前的Masonry插件 大小仅仅1 72 KB 简单配置 即可完成酷炫的时间轴效果
卡尺：用于测量图像和PDF尺寸的Node.js库
02-20
卡尺 当前支持的文件类型： PDF，PNG，JPEG，GIF，BMP，WEBP，SVG 构造Calipers的目的是提供一种比炮轰ImageMagick更快，更省资源的方法来确定图像或PDF的尺寸。 在我们必须在API请求有效期内验证图像和PDF的大小。 最简单的方法是将Shell封装到ImageMagick中，以识别文件的类型和大小。 对于高流量服务器，由于脱壳效率低下，这成为主要瓶颈。 卡尺保持高性能，因为它避免了产生子进程并且不会将整个文件读入内存。 取而代之的是，它智能地仅读取确定文件类型和尺寸所必需的文件部分。 安装 Calipers使用插件体系结构允许用户仅包括对他们需要测量的特定文件类型的支持。 这有助于避免浪费CPU周期来测量应用程序不支持的文件类型，并确保用户仅必须安装绝对需要的依赖项（例如Poppler for PDF支持）。 要使用Caliper，您必须安装核
10款特别实用的时间轴插件
08-21
10款炫酷的时间轴demo：如我们将新闻之类的内容按照月份排列，形成了一个垂直的时间轴，当在宽大屏幕上，时间轴的事件是在轴的两侧排列，而在较小的屏幕如手机屏幕，时间轴的事件会排列在轴的一侧。当然时间轴事件内容支持任意html元素内容。
期末作品网页制作css+js+jquery
01-29
作品实现了以下的js功能： （1） 使用正则表达式验证注册页面信息 （2） 网站首页动态显示系统时间 （3） 动态改变导航菜单样式 （4） 制作图片轮显效果 （5） 制作随光标滚动的广告图片效果 （6） 制作光标移到某...
7 个漂亮的 JavaScript 时间轴组件推荐
chenping0895的博客
04-16 2040
时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候则在这些长条的上方进行标记。本文介绍 7 个漂亮的时间轴组件，它们使用 JavaScript 和 CSS 开发。 1. Simil...
js自定义时间轴组件
wcxrib的博客
01-22 895
自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动，集拖动、点击、缩放、无限加载等于一体的时间轴组件。
jQuery时间轴插件：jQuery Timelinr
Just Code
08-12 687
这是一款可用于展示历史和计划的时间轴插件，尤其比较适合一些网站展示发展历程、大事件等场景。该插件基于jQuery，可以滑动切换、水平和垂直滚动、支持键盘方向键。经过扩展后可以支持鼠标滚轮事件。       查看演示DEMO   下载源码   HTML 我们在body中建立一个div#timeline作为展示区，#dates为时间轴，示例中我们用年份作为主轴，#issue...
three.js+原生js+jquery实现3d
06-06
Three.js 是一款基于 WebGL 的开源 JavaScript 库，可以方便地实现 3D 开发。利用 Three.js，我们可以在浏览器中快速建立基于 3D 的交互式应用程序。而原生 JS 和 JQuery 也可以实现 3D 效果，但是相比 Three.js，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值