这个时间轴是工作上用到的，自己写了一个， qq空间有时间轴的控件， 百度文库也有时间轴的控件；
百度的时间轴大概是这样的：
用户点击对应的锚链接，  那个三角会滚动， 然后左侧的界面也会滚动；
实际的效果如下图，用户点击左侧的按钮或者右侧的input，滚动条都会主动滚动， 这里有个小技巧就是用after和before伪类生成三角形， 用户点击按钮的滚动效果直接用jq的animate方法：

模板用了underscore，tempate方法挂到了$下， 作为$的工具方法（依赖于jquery），模板的js代码直接放这里方便一些小项目直接用：
//模板引擎的代码 (function () { //underscore抄的模板引擎; var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g; var escapes = { ': ', '\\': '\\', '\r': 'r', '\n': 'n', '\t': 't', '\u2028': 'u2028', '\u2029': 'u2029' }; $.templatesettings = { evaluate : //g, interpolate : //g, escape : //g } $.template = function(text, data, settings) { var render; settings = $.extend({}, settings, $.templatesettings); // combine delimiters into one regular expression via alternation. var matcher = new regexp([ (settings.escape || nomatch).source, (settings.interpolate || nomatch).source, (settings.evaluate || nomatch).source ].join('|') + '|$', 'g'); // compile the template source, escaping string literals appropriately. var index = 0; var source = __p+='; text.replace(matcher, function(match, escape, interpolate, evaluate, offset) { source += text.slice(index, offset) .replace(escaper, function(match) { return '\\' + escapes[match]; }); if (escape) { source += '+\n((__t=( + escape + ))==null?'':_.escape(__t))+\n'; } if (interpolate) { source += '+\n((__t=( + interpolate + ))==null?'':__t)+\n'; } if (evaluate) { source += ';\n + evaluate + \n__p+='; } index = offset + match.length; return match; }); source += ';\n; // if a variable is not specified, place data values in local scope. if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n'; source = var __t,__p='',__j=array.prototype.join, + print=function(){__p+=__j.call(arguments,'');};\n + source + return __p;\n; try { render = new function(settings.variable || 'obj', '_', source); } catch (e) { e.source = source; throw e; } if (data) return render(data, _); var template = function(data) { return render.call(this, data); }; // provide the compiled function source as a convenience for precompilation. template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}'; return template; }; })();
模板的使用的demo如下, 也可以参考官方的文档：http://underscorejs.org/#template：

修改了时间轴的样式， 又为这个插件添加了拖拽的方法，代码一下变得好乱， 顺便普及一下拖拽的事件， ondrop， ondragover，ondrag， 如果要让元素可以拖拽, 就要为要拖拽的元素添加draggable=true, 元素可以拖拽以后 ， 要为可以拖放到的的div或者其他块元素，绑定一个dragover方法， 这个方法就做一件事， ev.preventdefault()， 看代码撒：
运行下面代码
请把图片拖放到矩形中：
另外一个demo：运行下面代码 what fruits do you like?
apples oranges pears drop your favorite fruits below:
drop
html5的拖拽提供了 setdragimage ， effectallowed ， setdata.... 等很多便捷的方法给开发者, 通过filereader读取file， 然后就可以用ajax与后台进行交互， 和前端dom操作：
drop拖放文件进来

插件效果图：
最后完成的插件代码：
文档类型 视频类型 单元测试 音频类型 图片类型 文档类型 视频类型 单元测试 音频类型 图片类型 文档类型 视频类型 单元测试 音频类型 图片类型 文档类型 视频类型 单元测试 音频类型 图片类型 文档类型 视频类型

以上所述就是本文的全部内容了，希望大家能够喜欢。