html + css + javascript 制作时间轴

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

html + css + javascript 制作时间轴_第1张图片

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

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

你可能感兴趣的:(前端)