HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】
前言
由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现。[据说这个东西挺火的,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实现纯手工的垂直时光轴【附源码】的更多相关文章
- HTML5网页录音和压缩,边猜边做..(附源码)
宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- jQuery带遮罩层弹窗实现(附源码)
1.CSS样式 <style type="text/css"> body { font:11px/1.6em Microsoft Yahei; background:# ...
- jQuery相册预览简单实现(附源码)
1.CSS样式 <style type="text/css"> html,body,.viewer,.viewer .pic-list,.viewer .pic-lis ...
- HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版
<HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版
HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...
随机推荐
- 光盘刻录 CD刻录软件 Ashampoo Burning Studio特别版 刻录CD就这么简单
著名的刻录软件Nero,其近上百M体积实在太大,而且安装之后的文件体积也有上G多.这么大的体积安装使用都不方便,好在现在很多都做得很不错,比如阿香婆的光盘刻录软件Ashampoo® Burning S ...
- ubuntu16.04装MatConvNet
按matconvnet官网上的步骤来,编译代码的时候会发现编译失败. 参考这条issues 以下是我的解决方案: I use ubuntu16.04 with x64 architecture. I ...
- js之 matches (可以取代jq的 delegate 方法)
问题:请给#wrap 下面的子元素添加点击事件! <div id="wrap"> <a class="btn" href="http ...
- [C#] 图文解说调用WebServer实例
本文旨在实现如何在.NET环境下调用WebServer,以天气接口为例进行说明. WebServer地址:http://www.webxml.com.cn/WebServices/WeatherWeb ...
- [Unity3d]调试问题之UI/Image不显示
问题描述 在项目中添加的UI/Image资源,在PC和通过Unity Remove测试都没有问题: PC上的效果 手机上Unity Remove测试结果 可真正发布到手机上运行则如下显示,说明imag ...
- C# Process.Start()方法详解
System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...
- sicp-py
第一章 在第一章中,我们专注于计算过程,以及程序设计中函数的作用.我们看到了如何使用原始数据(数值)和原始操作(算术运算),如何通过组合和控制来形成复合函数,以及如何通过给予过程名称来创建函数抽象.我 ...
- 3Struts2进阶----青软S2SH(笔记)
关于上面这个红框里的问题,经过实际测试发现,struts2增加一个命名空间后,jsp页面里所引用的资源的路径,也需要增加一个"../", 于是,跟SpringMVC没啥区别了啊.. ...
- 条件编译#if #ifdef
近期由于一些莫名其妙的原因开始学c++,我觉得我哪天要是挂了也是被自己给折腾死的,算了,反正不是折腾死就是被淘汰,当是没事打发时间了,废话不多说,开始今天的主题. 之前接触的注释就是注释,条件语句就是 ...
- DataTable数据检索的性能分析(转寒江独钓)
我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic Data,XML, NHibernate,LINQ to SQ ...