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

目录
相关文章
|
4月前
|
关系型数据库 MySQL Docker
利用docker 开发 信息系统,python + mysql + flask + jquery
利用docker 开发 信息系统,python + mysql + flask + jquery
60 2
|
3月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
28 0
|
5月前
|
Web App开发 设计模式 JavaScript
基于html+jquery开发的科学计算器(课程作业)
基于html和jquery开发的科学计算器,该科学计算器可进行乘方、开方、指数、对数、三角函数、统计等方面的运算,又称函数计算器。 科学型带有所有普通的函数,所有的函数都分布在键盘上以致于你可以不用通过菜单列表来使用它们。
26 0
|
6月前
|
XML JSON JavaScript
基于jquery+html开发的json格式校验工具
JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
36 0
|
7月前
|
JavaScript 搜索推荐 Windows
基于jquery开发的Windows 12网页版
基于jquery开发的Windows 12网页版
53 0
基于jquery开发的Windows 12网页版
|
7月前
|
设计模式 JavaScript 前端开发
【JavaWeb】 JavaScript 开发利器之 jQuery
封装和抽象:jQuery库封装了一系列常见的DOM操作、事件处理、Ajax请求等功能,以简化开发人员的工作。它对底层的JavaScript操作进行了封装和抽象,提供了更简洁、易用的接口。 选择器引擎:jQuery库通过自定义的选择器引擎,可以使用CSS选择器来选择HTML元素。这使得开发人员能够方便地操作DOM元素,而不需要繁琐地编写原生的JavaScript代码。 链式调用:jQuery库采用链式调用的设计模式,使得可以对选择的元素进行连续的操作。通过返回相同的jQuery对象,可以在同一行代码中依次调用多个方法,提高开发效率和代码可读性。
|
8月前
|
移动开发 JavaScript 前端开发
JavaScript 开发利器之 jQuery
JavaScript 开发利器之 jQuery
105 0
|
11月前
|
设计模式 缓存 移动开发
像 jQuery 一样通过函数开发和调用小程序组件
像 jQuery 一样通过函数开发和调用小程序组件
137 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
267 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
109 0
开发jQuery插件这些就够了