本文分享了一个关于jQuery时间轴插件的开发经验，详细介绍了从需求分析到实现的具体步骤，包括HTML+CSS布局、时间轴拖动功能及提示信息展示等关键技术点。
xxx工程师：
你好！作为导师的我，我为能有你这个不错的朋友感到十分的高兴，因为毕竟你刚走出大学的校园， 更令人的遗憾的是，你大学荒废了四年了。
在我们共同学习的几个月中，我从你身上发现了确实有一个成为技术大拿的潜质——自学能力。果不其然，你这一个月已经成功 进入了.net工程师的角色，并且，得到老板的
赏识。但是，你说要我帮助搞定一个jquery的插件的问题时，我又十分的焦虑，焦虑不是你的技术，因为以你 的自学能力，任何技术能力都能够搞定。但是，你应该有一个更
重要的能力--勤奋刻苦的能力，这是任何成功者必备的最重要的素质。 我这里写了这个时间轴的控件思路，告诉你授之以鱼不如授之以渔。
首先，我明确的告诉你，你太懒了。网上的 有好多jquery ui 控件 ，我开始这么想的。 可惜，是不如愿，因为你的需求太诡异了。
干脆没辙了，我帮你写个好的demo了，并附上我想这个demo的思路。还好美工的妹妹是仁慈的，我不需要做那头痛的图片问题上，煞费苦心。
首先简单几个层+1个img标签， 这个基本的html+css，你应该没有问题吧，他的效果如图所示：
这是我们写插件成功的第一步。下面，我们能完成时间轴的第二部的——能拖动时间抽，做img外嵌套 一个层，在监听mouseMove这个事件，在使div 的top和left
变化，注意这div是position:absolute 的。这样子能移动时间轴了。
最后，我们要移到年代的时间块上，显示具体的解释。 他的样子是这样的，如图所示：
这是怎么做的啊，无非是监听mouseOver和mouseOut事件了，移上去，显示相应的层的解释。xx兄:请注意了，这个层是动态产生了，添加到母层中。注意，这个动态
的层MouseOut的时候，要移去啊。
一首七字口诀来做结吧！
Jquery控件并不难，
先明需求再来办。
HtmlCSS不可少。
运用方法就好看
这时候，就ok了。xxx兄弟，你看看，当初，你的jquery没有掌握牢吧！希望你，好好学下，这样。你的以后jquery应该就没问题了。
好！时间不早了，就聊在这里吧！
祝您：
技术进步
工作顺利
laozhu1124
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
