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

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

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

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

ArcGis API for JavaScript——时间轴

**ArcGis API for JavaScript——时间轴** ArcGis API for JS提供了添加时间轴的API:TimeSlider。TimeSlider控件可以用来展示包含时间属...

js写的 几款时间轴

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

Thumbnailator java 图片处理技术

Thumbnailator 是一个为Java界面更流畅的缩略图生成库。从API提供现有的图像文件和图像对象的缩略图中简化了缩略过程,两三行代码就能够从现有图片生成缩略图,且允许微调缩略图生成,同时保持...

纯div+css样式弹出泡泡消息框

也许很多框架都自带了这样的弹出泡泡框,但我没接触过,现在需要用,于是便自己封装了一个,虽然还不完美,但已经可以用了。这个小控件可以重定义样式,通过传递配置参数,或修改默认配置参数都可以进行样式调整。不...

HTML5+CSS3响应式垂直时间轴

  • 2016年02月26日 11:52
  • 8KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html + css + javascript 制作时间轴
举报原因:
原因补充:

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