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

CSS+Html垂直时间轴

  • 2014年04月08日 13:32
  • 25KB
  • 下载

js写的 几款时间轴

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

动态时间轴特效(html,js等)完整代码

  • 2013年12月05日 23:39
  • 649KB
  • 下载

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

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

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

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

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

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

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

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

网页中时光轴的简单实现

时光轴效果如下:        index.html 时光轴 .container { width: 800px; ...
  • qq_15096707
  • qq_15096707
  • 2016年04月30日 14:17
  • 4194

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

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

CSS- 横向和纵向时间轴

转自:https://www.cnblogs.com/xiaofeixiang/p/5036154.html 简单的实现了一下横向和纵向时间轴,可以简单的看下一下实现的效果: ...
  • Inuyasha1121
  • Inuyasha1121
  • 2017年12月25日 09:37
  • 119
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html + css + javascript 制作时间轴
举报原因:
原因补充:

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