html + css + javascript 制作时间轴

最新推荐文章于 2024-09-20 20:23:02 发布

BunnyMelody

最新推荐文章于 2024-09-20 20:23:02 发布

阅读量6.6k

点赞数

分类专栏：【初级】前端文章标签：对话框 html 时间轴 css

本文链接：https://blog.csdn.net/viciousDear/article/details/50749842

版权

【初级】前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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

这里写图片描述

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

$('#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