html + css + javascript 制作时间轴

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

这里写图片描述

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值