html + css + javascript 制作时间轴

原创 2016年02月26日 15:00:50

在做很多小功能的时候,我们可能都需要时间轴,比如版本记录,或者一个流程的记录,简洁明了的设计会给人眼前一亮的感觉,如何大气简洁又能表述清楚呢,我这里有一个版本。

这里写图片描述

当中的设计包括三角对话框的制作,我在上一篇博客中提过,圆形的制作,定位布局,也有可能,还需要一个回到顶部的功能。回到顶部如果不要求美观别致的话其实是一个相对容易的功能,我在这里的回到顶部也不是很华丽,代码类似这种:

$('#scroll-top').click(function(event) {
    $('body').animate({scrollTop:0}, 512);
    return false;//灰常重要,不然scrolltop会立即到0,然后再从当前位置到0,造成闪两下的现象
});

我在调试代码的时候曾反复出现一个问题,点击了回到顶部后,会立即回到顶部,又从点击回到顶部时稍向上一点的位置逐渐回去,这是为什么呢,我用了event.preventDefalut, event.stopPropagation()等想阻止冒泡阻止浏览器的默认行为但都失败了,后来被万能的return false拯救了。

完整代码http://download.csdn.net/detail/viciousdear/9444858

【前端Web】Jquery实现的四款牛B的时间轴

引言 最近项目中使用了很多前端的东西,对于我一个做后台开发的人员,这是一个很好的锻炼的机会。经过这段时间的学习,感觉前端的东西太多了,太强大了,做出来的东西太炫酷了。现在有很多开源的前端框架,做...
  • hj7jay
  • hj7jay
  • 2017-02-21 09:22:27
  • 6900

js写的 几款时间轴

1、使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块。使...
  • prospertu
  • prospertu
  • 2017-05-22 09:36:47
  • 6647

纯CSS时间轴实现的办法,超简单的!

转自:http://oss.so/blog/21.html 在以往,如果要在网页上,实现时间轴效果,我们需要使用jQuery来实现。虽然jQuery十分的漂亮美观,但使用方法来说,太麻烦...
  • zhang_Red
  • zhang_Red
  • 2015-03-23 12:29:35
  • 8234

CSS- 横向和纵向时间轴

转自:https://www.cnblogs.com/xiaofeixiang/p/5036154.html 简单的实现了一下横向和纵向时间轴,可以简单的看下一下实现的效果: ...
  • Inuyasha1121
  • Inuyasha1121
  • 2017-12-25 09:37:49
  • 750

HTML+CSS+JQUERY漂亮的垂直时间轴

转自:https://www.cnblogs.com/sanshi/p/3229220.html 一个简单、漂亮的数据展示方式,很快我找到了这个例子:http://tympanus.net/...
  • Inuyasha1121
  • Inuyasha1121
  • 2017-12-25 09:45:26
  • 612

ArcGis API for JavaScript——时间轴

**ArcGis API for JavaScript——时间轴** ArcGis API for JS提供了添加时间轴的API:TimeSlider。TimeSlider控件可以用来展示包含时间属...
  • u010371710
  • u010371710
  • 2017-05-04 11:01:09
  • 2051

<em>html</em>5实现的<em>时间轴</em>设计工作记录样式效果源码

这是一款基于<em>html</em>5实现的<em>时间轴</em>设计工作记录样式效果源码,是一款时间考勤表样式插件源码。用户可根据自身需求调整显示的文字、颜色及时间等的样式和数值。使之更具...
  • 2018年03月27日 00:00

【时间轴】推荐几款jQuery时间轴插件Timeline

3D效果的响应式CSS3时间轴CSS时间轴3D效果实例,一套基于HTML5技术实现的CSS时间轴3D动画特效,效果场面很令人震撼,单击之后会发现犹如一片树叶匀速飘来带来一阵微风,本人是赞不绝口啊,下载...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2016-07-14 10:48:21
  • 14020

针对时间轴TimeLine的一些js操作

动态生成时间轴。且右边的div生成是根据左边生成的。 1、jsp页面
  • YapingGe2014
  • YapingGe2014
  • 2015-05-26 14:09:01
  • 5059

两个很强大的js实现的时间轴

  • 2012年09月05日 16:32
  • 841KB
  • 下载
收藏助手
不良信息举报
您举报文章:html + css + javascript 制作时间轴
举报原因:
原因补充:

(最多只允许输入30个字)