两个效果不错胡时间轴网站

http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/index.html

http://world.time.com/2013/12/05/nelson-mandelas-extraordinary-life-an-interactive-timeline/

时间: 2024-11-05 14:27:05

两个效果不错胡时间轴网站的相关文章

网页效果-简单的时间轴实现

之前在网上看到,有很多人写的时间轴效果,于是自己也模仿着写了写.以下贴出自己写的解决方法(横向轴与纵向轴). 简单的时间轴效果容易实现,但如果需要看起来有模有样,就需要对页面进行设计布置了. 1.利用Js加简单的界面布置,实现时间轴鼠标点击轮换图片效果(纵向). 实现思路:利用多个div加背景色做纵向时间轴的样式,用CSS进行定位布局(时间轴一般都相对于浏览器窗口位置进行定位,避免浮动),再加上相应的文字描述.(:after,:before等一样能实现其效果),最后在用Js添加一些简单的鼠标事件

【真枪实干系列】Xibo-CMS-Layout关于时间轴优先级的测试

时间轴优先级 所有关于Xibo文章,均由柠檬加冰CSDN首发,欢迎大家支持原创 使用布局(Layout)的过程中,发现两个问题 背景区域如果不设置任何东西的话,那么布局的状态永远是个叉号,显示this layout is invalid and can not be scheduled,随便在背景区域(也就是创建布局后的默认区域)增加一个背景图,布局的状态就显示为正常,可预览 不同区域分别可以设定时间轴,时间轴的优先级顺序待定. 因此我们决定创建一个简单的布局,测试不同区域的时间轴对展示时间控制

时间轴样式

样式还没有测试各浏览器的兼容性,打个flag先. 1.效果一 css /**时间轴样式一*/ .time-zone-line .line{ margin-left: 40px; margin-top: 40px; } .line { border-left: 1px solid #ddd; border-left-style: dashed; } .item { padding-left: 23px; position: relative; margin-left: -5px; min-heig

超炫的时间轴jquery插件Timeline Portfolio

Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.Timeline Portfolio使用jquery和CSS3封装的非常棒,插件通过读取data.json文件来写入文档中,这样,您需要根据自己的需求设计下页面,然后再修改data.json里面的数据为自己的就可以实现一个超炫的时间轴网站了. jquery插件实例:超炫的时间轴jquery插件Time

CSS3实现时间轴效果

最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息,就感觉效果还不错.但感觉这种效果貌似对于动态添加不是很灵活,因为高度不像宽度可以灵活的自适应,故添加得自己一个一个设置.所以很多都是做成展示效果. 当然啦,自己也基于它的这个想法搞了一点简单点的类似效果,主要还是整个布局效果,具体每一块内容就不仿造了,而且我自己也加了一下开场动画,让它更好玩一

JS时间轴效果(类似于qq空间时间轴效果)

2013-11-04 23:51 by 空智, 4041 阅读, 15 评论, 收藏, 编辑 在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的),只是当时研究了下他们HTML结构和css结构,所以仿照他们那种逻辑自己也写了一个出来.先来看看是个什么样的吧!如下图所示: 需求分析:左侧是一个时间

时光轴 时间轴 效果

要实现类似QQ空间那样时光轴 时间轴效果 如图 ==================== 分析:左边 ul的border-left实现,这样会出现底部的 余出的线条,不美观, 所以考虑li的border-left实现. li的padding-bottom撑开上下间距 h4标题的:before实现圆圈,定位到左边. 圆圈的实现使用绝对定位实现,注意下UL和LI实现方式下的,圆圈定位位置. =========Ul实现边框======= .money-process .process-list { w

使用ExpandableListView时间轴效果达到

不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.uti

使用ExpandableListView实现时间轴效果

不废话,先上图,看看效果 这是用ExpandableListView来实现时间轴效果,原理比较简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.util.L