• 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

  • 相关阅读:
    sfs2x 连接 mongodb
    java websocket
    webstorm 4.0 注册码
    解决 sfs2 admin tool 找不到扩展
    window 注册表五大类
    opengl 学习第二日
    java google Protobuf
    扩展 java sencha touch PhonegapPlugin
    sencha touch2 kryonet socket phonegap 通信 作者:围城
    sencha touch2 layout 笔记
  • 原文地址:https://www.cnblogs.com/manuosex/p/2722361.html
Copyright © 2020-2023  润新知