zoukankan      html  css  js  c++  java
  • [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的一些算法 可以自己修改

      

      

  • 相关阅读:
    Kafka 生产者 自定义分区策略
    同步互斥
    poj 1562 Oil Deposits(dfs)
    poj 2386 Lake Counting(dfs)
    poj 1915 KnightMoves(bfs)
    poj 1664 放苹果(dfs)
    poj 1543 Perfect Cubes (暴搜)
    poj 1166 The Clocks (暴搜)
    poj 3126 Prime Path(bfs)
    处理机调度
  • 原文地址:https://www.cnblogs.com/enix/p/2565568.html
Copyright © 2011-2022 走看看