Jquery 开发 案列 时间轴 --一封写给xxx工程师的信

   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

                                                                                                                                                                                                                              2012.10.13

时间: 2025-01-01 17:36:55

Jquery 开发 案列 时间轴 --一封写给xxx工程师的信的相关文章

插件-跪求jquery开发的横向时间轴控件?

问题描述 跪求jquery开发的横向时间轴控件? 如上图,谁用过这样的一款插件,在线等............. 解决方案 http://www.oschina.net/news/60906/jquery-timeline%20-plugins 解决方案二: 推荐两个插件给你: 1.使用CSS3和jQuery制作的水平时间轴 http://www.leyideng.com/pages/2015-11/435.html 2.jQuery时间轴插件:jQuery Timelinr http://ww

jQuery插件Timelinr 实现时间轴特效_jquery

前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. HTML 我们在body中建立一个div#timeline作为展示区,#dates为时间轴,示例中我们用年份作为主轴,#issues作为内容展示区,即展示对应主轴点年份的内容,注意id对应上. <div id="timeline"> <ul id="dates&

jQuery制作Facebook Timeline时间轴

http://www.w3cplus.com/jquery/facebook-timeline-design-using-jquery

一封写给中国学生的信

中介交易 SEO诊断 淘宝客 云主机 技术大厅 今年5月23日,比尔·盖茨先生在<华尔街日报>上撰文,支持和敦促美国政府给予中国永久性正常贸易国待遇.文中,他特别谈到了在清华大学与中国大学生那次对话的愉快经历以及因此而留下的深刻印象. 这篇文章令我不禁想到,在中国的这两年来,我工作中最大的享受也是到国内各高校与学生们进行交流.这些访问和交流使得我有机会与成千上万的青年学生就他们所关心的事业.前途等问题进行面对面的沟通.中国学生的聪明.好学和上进给我留下了非常深刻的印象. 在与这些青年学生的交流

php中时间轴开发,即显示为“刚刚”、“5分钟前”、“昨天10:23

  php中时间轴开发,即显示为"刚刚"."5分钟前"."昨天10:23"等 开发中还是蛮有用的,譬如论坛帖子,围脖等都有相关应用 //时间转换函数  function tranTime($time) {       $rtime = date("m-d H:i",$time);       $htime = date("H:i",$time);              $time = time() - 

跪求 jquery时间轴插件

问题描述 跪求 jquery时间轴插件 360跪求...谁知道有哪些时间轴可以做出这种效果的,谢谢了 解决方案 maybe echarts? 解决方案二: 不是.你说的那个是图形化插件,我要是的时间轴(就是下面一行时间,然后上面显示做的事情) 解决方案三: http://www.oschina.net/news/60906/jquery-timeline%20-plugins http://www.17sucai.com/pins/6558.html

TimergliderJS 一个基于jQuery的时间轴插件_jquery

Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

jQuery和CSS3制作的响应式水平时间轴的例子

我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸.那么 今天我要给大家分享的是一款支持响应式.支持触屏手势滑动的水平时间轴.   我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成.而div.events-content放置的是多个日期对应的事件节点,它又多个li元素

jQuery时间轴插件使用详解_jquery

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: <!-- //设置内容; window.onWebMessage( '{"type":&qu