前言

  由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现。[据说这个东西挺火的,QQ空间和FB都在用...]

这个时光轴是在 三生石上 这位博主的时光轴基础上修改的,可以称之为增强版吧!

兼容性

  Firefox、chrome、360急速、360安全浏览器、IE8,其他的没测试,不过IE上的兼容有些问题。

效果预览

操作演示

实现过程

  我是做后端的,所以,页面设计的并不是很好看来着。大家可以自己修改页面。

  1、布局

  页面布局不多说了,就是纯DIV+CSS实现的,没有什么特殊的。在每一个时间轴的节点上,有一个大的DIV层 (id=content201301) ,这里content是固定字段,后面的是这个节点的年月,这部分是实现点击左上角的年月可以自动定位到这个DIV高度的。 另外这种拼接方式也方便之后的后台套用模板。然后,这个大的DIV层里面有若干小的DIV层(Id=divCount),这里的ID是固定了,用来存放内容,另外给这些层添加浮动float:left效果。

  2、缩放

  接下来是实现收缩,缩放功能用了jQuery的slideDown()、slideUp()方法,进行了一下简单的缩放动画。

  3、时间节点上的图标动画

  这个图标使用了CSS3的旋转,代码如下:

          ul.timeline li .number .hand_img
{
margin-top:3px;
cursor:pointer;
zoom:;
-webkit-transition: -webkit-transform 0.8s ease-in;
-moz-transition:-moz-transform 0.8s ease-in;
-o-transition:-o-transform 0.8s ease-in;
transition:transform 0.8s ease-in;
} .Rotation
{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

  这样,两个连贯的动画,基本上就实现了。很简单把。

  4、HTML5网页视频

  由于可能会有视频,所以就内嵌了一个HTML5的播放器,不过,这种播放器需要浏览器的支持!

  这里使用了video.js这个HTML播放器,导入video.js 、video.css,具体配置,在源码里面写了。

 <script src="video/video.js"></script>
<video id="video_2" class="video-js vjs-default-skin" controls preload="none" poster="video/Resources/3.png" width="640" height="364" data-setup='{"example_option":true}'>
<source src="video/Resources/3.mp4" type='video/mp4' />
<track kind="captions" src="voideo/captions.vtt" srclang="en" label="English" />
</video>

  5、左上角的迷你时间菜单

  这部分不细说了,一笔带过了。这个迷你的时间轴,就是嵌套的两个Ul做成的菜单,设置样式还有使用jQuery的动画方法就能完成,还是不太明白的话,源码里面也写了,也加了注释。

后记

  刚开始决定写时光轴的时候,在网上到处找jQuery插件,后来在三生石的博客里面看见了他写的文章,点醒了我,这种功能,完全可以自己纯手写的,动画并不复杂,而且网上的jQuery插件有的太臃肿。结果,一上午就写完了,事实证明,靠自己还是行的通的!

  由于这个模块是自己完全手写的,今后需要修改,可以很方便进行修改!要是用的网上的jQuery的插件,那可就惨了...

相关资源

HTML5+CSS3+Jquery实现纯手工的垂直时光轴【威力增强版】:http://download.csdn.net/detail/a406502972/8021863

Github地址:https://github.com/CBDlkl/TimeAxis

注:解压密码:HTML5

HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】的更多相关文章

  1. HTML5网页录音和压缩,边猜边做..(附源码)

    宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...

  2. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  3. jQuery带遮罩层弹窗实现(附源码)

    1.CSS样式 <style type="text/css"> body { font:11px/1.6em Microsoft Yahei; background:# ...

  4. jQuery相册预览简单实现(附源码)

    1.CSS样式 <style type="text/css"> html,body,.viewer,.viewer .pic-list,.viewer .pic-lis ...

  5. HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版

    <HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...

  6. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  7. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  8. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  9. HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版

    HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...

随机推荐

  1. 光盘刻录 CD刻录软件 Ashampoo Burning Studio特别版 刻录CD就这么简单

    著名的刻录软件Nero,其近上百M体积实在太大,而且安装之后的文件体积也有上G多.这么大的体积安装使用都不方便,好在现在很多都做得很不错,比如阿香婆的光盘刻录软件Ashampoo® Burning S ...

  2. ubuntu16.04装MatConvNet

    按matconvnet官网上的步骤来,编译代码的时候会发现编译失败. 参考这条issues 以下是我的解决方案: I use ubuntu16.04 with x64 architecture. I ...

  3. js之 matches (可以取代jq的 delegate 方法)

    问题:请给#wrap 下面的子元素添加点击事件! <div id="wrap"> <a class="btn" href="http ...

  4. [C#] 图文解说调用WebServer实例

    本文旨在实现如何在.NET环境下调用WebServer,以天气接口为例进行说明. WebServer地址:http://www.webxml.com.cn/WebServices/WeatherWeb ...

  5. [Unity3d]调试问题之UI/Image不显示

    问题描述 在项目中添加的UI/Image资源,在PC和通过Unity Remove测试都没有问题: PC上的效果 手机上Unity Remove测试结果 可真正发布到手机上运行则如下显示,说明imag ...

  6. C# Process.Start()方法详解

    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...

  7. sicp-py

    第一章 在第一章中,我们专注于计算过程,以及程序设计中函数的作用.我们看到了如何使用原始数据(数值)和原始操作(算术运算),如何通过组合和控制来形成复合函数,以及如何通过给予过程名称来创建函数抽象.我 ...

  8. 3Struts2进阶----青软S2SH(笔记)

    关于上面这个红框里的问题,经过实际测试发现,struts2增加一个命名空间后,jsp页面里所引用的资源的路径,也需要增加一个"../", 于是,跟SpringMVC没啥区别了啊.. ...

  9. 条件编译#if #ifdef

    近期由于一些莫名其妙的原因开始学c++,我觉得我哪天要是挂了也是被自己给折腾死的,算了,反正不是折腾死就是被淘汰,当是没事打发时间了,废话不多说,开始今天的主题. 之前接触的注释就是注释,条件语句就是 ...

  10. DataTable数据检索的性能分析(转寒江独钓)

    我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic Data,XML, NHibernate,LINQ to SQ ...