竖向时间轴左右分栏插件

上个项目有个页面做到一个时间轴的东西,觉得蛮好看到, 给大家分享一下,效果如下

话不多说直接上代码:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时间轴</title>
<link rel="stylesheet" href="timeLine.css">
</head>
<body>

<div class="myTime"></div>

<script src="jquery-1.11.1.min.js"></script>
<script src="timeLine.js"></script>
<script>
var data=[{content:[‘我是第一条‘,‘50140是打发第三方‘],time:‘2018-10-10‘},{content:[‘1505150‘,‘50140是打发第三方‘],time:‘2018-10-10‘},];

// 使用
$(‘.myTime‘).timeLine(data)
</script>
</body>

</html>

附上代码地址:https://github.com/zhongjinkun/timeLine

喜欢的老铁star一下

原文地址:https://www.cnblogs.com/zjk6/p/10715965.html

时间: 2024-11-09 03:46:40

竖向时间轴左右分栏插件的相关文章

基于jQuery的时间轴鼠标悬停动画插件

之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比如鼠标划过时圆圈的展开动画. 在线预览   源码下载 实现的代码. html代码: <div class="clearfix course_nr"> <ul class="course_nr2"> <li>1993 <div c

jQuery时间轴插件:jQuery Timelinr

前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. HTML 我们在body中建立一个div#timeline作为展示区,#dates为时间轴,示例中我们用年份作为主轴,#issues作为内容展示区,即展示对应主轴点年份的内容,注意id对应上. <div id="timeline"> <ul id="dates&

时间轴插件

jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. 查看演示 下载源码 HTML 我们在body中建立一个div#timeline作为展示区,#dates为时间轴,示例中我们用年份作为主轴,#issues作为内容展示区,即展示对应主轴点年份的内容,注意id对应上. <div id="timeli

超炫的时间轴jquery插件Timeline Portfolio

Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.Timeline Portfolio使用jquery和CSS3封装的非常棒,插件通过读取data.json文件来写入文档中,这样,您需要根据自己的需求设计下页面,然后再修改data.json里面的数据为自己的就可以实现一个超炫的时间轴网站了. jquery插件实例:超炫的时间轴jquery插件Time

时间轴插件完善,大事记清晰美观

经过前几次产品版本的发本,每次看到写的升级日志就头大,所以这里就利用时间轴插件实现一下这个升级日志的记录,方便查看!好啦,直接上代码: /** * 初始化时间轴数据展示 * * @param {} data 时间轴数据对象 */ function initTimeAxis(data){ var timeAxisHtml = '<h1 class="title">' + data.name + '</h1>'; $.each(data.items,function

基于jQuery的美食时间轴焦点图插件

这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预览   源码下载 实现的代码. html代码: <div class="main_w"> <div class="index_zzw" id="index_zzw"> <div class="index_zzw

HighCharts 图表插件 自定义绑定 时间轴数据

HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.html     学习示例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

万彩动画大师丨时间轴竖向滚动条

万彩动画大师的时间轴竖向滚动条可以向你展示现在进行到哪个元素动画和哪个镜头,以便让您更清晰明了地知道动画视频播放的进度. 当[预览]动画视频时,万彩动画大师的[时间轴区域]会有一个[竖向滚动条]表示进度,当预览暂停或者结束后,可以在时间轴区域里任意移动时间轴竖向滚动条.如下图竖向滚动条界面所示: 原文地址:https://www.cnblogs.com/focusky/p/10209690.html

【真枪实干系列】Xibo-CMS-Layout关于时间轴优先级的测试

时间轴优先级 所有关于Xibo文章,均由柠檬加冰CSDN首发,欢迎大家支持原创 使用布局(Layout)的过程中,发现两个问题 背景区域如果不设置任何东西的话,那么布局的状态永远是个叉号,显示this layout is invalid and can not be scheduled,随便在背景区域(也就是创建布局后的默认区域)增加一个背景图,布局的状态就显示为正常,可预览 不同区域分别可以设定时间轴,时间轴的优先级顺序待定. 因此我们决定创建一个简单的布局,测试不同区域的时间轴对展示时间控制