[javascript] 很棒的时间线ui控件 (纯javascript,跨浏览器,有媲美flash的动画)
时间练利用两个时间之间的差别与整个时间轴的长度运算得来
locateHandler = function () { var referTime = (that[that.length] - that[0]) / 86400000, i = 0, len = that.handler.length, temp = 0; for (; i < len;) { temp = ((that[i] - that[0]) / (referTime * 86400000)) * that.parent.offsetWidth; that.fx(that.handler[i], 'left' , ((i === len - 1 || i === 0) ? temp - 20 : temp), 50); i++; } |
为了减少计算次数,用户操作时把图文面板,时间点,还有时间的位置信息都储存起来,这样在用户操作时计算并储存,第二次操作时读取缓存的位置信息。直接用css设置位置减少运算量
cache = [[],[],[]] |
初始化时只有一组信息
触摸了2个时间点以后,位置数据已经被缓存起来了
if (!indicator.cache[1][index]) { if ((rect.left - div.offsetWidth / 2) < limit.left) { indicator.cache[1][index] = 'visibility:visible;left:0px;' ; } else if ((rect.left + div.offsetWidth / 2) > limit.right) { indicator.cache[1][index] = 'visibility:visible;left:' + (limit.right - div.offsetWidth - limit.left) + 'px;' ; } else { indicator.cache[1][index] = 'visibility:visible;left:' + (rect.left - div.offsetWidth / 2 - limit.left) + 'px;' ; } } |
图文面板的位置也是经过智能计算获取,如果超出左边则左对齐,其他情况则以时间点位参考居中,右边超出亦然
动画使用了tween的一些算法 可以自己修改
分类:
JavaScript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂