zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Multi-Agent Actor-Critic for Mixed Cooperative-Competitive Environments环境代码详解
    zc.buildout构建项目时报错‘AttributeError: '_NamespacePath' object has no attribute 'sort'’
    利用Jenkins打包ISO和QCOW2镜像文件
    解决python pip安装提示"not a supported wheel on this platform"
    Kali 2017.3开启VNC远程桌面登录
    Jenkins邮件扩展插件Email Extension Plugin配置使用
    Jenkins执行sudo权限的设置
    如何解决源码安装软件中make时一直重复打印configure信息
    CentOS 7下安装配置proftpd搭建ftp服务器
    如何使用capedit分割数据包文件
  • 原文地址:https://www.cnblogs.com/manuosex/p/2722361.html
Copyright © 2011-2022 走看看