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和 ...
随机推荐
- 微信签名算法的服务端实现(.net版本)
一.概要 微信此次开放JS接口,开放了一大批api权限,即使在未认证的订阅号也可以使用图像接口,音频接口,智能接口,地理位置,界面操作,微信扫一扫等功能.要知道:以前订阅号只能接受和被动回复用户消息而 ...
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- poj 3680 Intervals
给定N个带权的开区间,第i个区间覆盖区间(ai,bi),权值为wi.现在要求挑出一些区间使得总权值最大,并且满足实轴上任意一个点被覆盖不超过K次. 1<=K<=N<=200.1< ...
- Java 集合类详解
集合类说明及区别 Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashtable ├HashMap └W ...
- JS-面向对象
话说,再次看完这个实例后的我,开始怀疑面向对象和JSON的区别...并开始怀疑这是面向对象的真实性 <!DOCTYPE html> <html> <head> &l ...
- for循环递归树
protected string _menu = string.Empty; public void FirstAnsyData() { try { // List<object> lsN ...
- JavaScript写在Html页面的<head></head>中
JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...
- __index
Window = {} Window.prototype = {x = , y = , width = , height = } Window.mt = {} function Window.new( ...
- .Net 中的反射(查看基本类型信息) - Part.2
反射概述 和Type类 1.反射的作用 简单来说,反射提供这样几个能力:1.查看和遍历类型(及其成员)的基本信息和程序集元数据(metadata):2.迟绑定(Late-Binding)方法和属性.3 ...
- 程序代码中退出函数exit()与返回函数return ()的区别
程序代码中退出函数exit()与返回函数return ()的区别 exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数 ...