进度条与时间轴绑定显示图片

第一步是下载Bootstrap和Glyphicons库。你可以找到外部引用Bootstrap CDN主机上的图标字体文件。我分开这些样式表到不同的文件,同时创建一个新的文档称为styles.css。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!doctype html>

<html lang="en-US">

<head>

  <meta charset="utf-8">

  <meta http-equiv="Content-Type" content="text/html">

  <title>Vertical Responsive Timeline UI - Template Monster Demo</title>

  <meta name="author" content="Jake Rocheleau">

  <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">

  <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">

  <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">

  <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-glyphicons.css">

  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">

  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

</head>

 
样式表是基于BS时间轴使用默认的Bootstrap 代码的片段。但是我重新设计布局处理更好的响应技术,也更新更深的UI的配色方案。

您可能还注意到包括了日期。这有助于单独列出某个月而浏览帖子。每个气泡可以代表一个事件,状态更新,或者简单的博客文章。

Twitter Bootstrap 包含一组默认的类,可以用在任何页面。这个设计包含一个.container div的基于浏览器的宽度扩展或收缩。小标题下你会发现一个无序列表类.timeline。这是使用CSS来创建一个线的中心页面。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<ul class="timeline">

  <li><div class="tldate">Apr 2014</div></li>

 

  <li>

    <div class="tl-circ"></div>

    <div class="timeline-panel">

      <div class="tl-heading">

        <h4>Surprising Headline Right Here</h4>

        <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>

      </div>

      <div class="tl-body">

        <p>Lorem Ipsum and such.</p>

      </div>

    </div>

  </li>

 

  <li class="timeline-inverted">

    <div class="tl-circ"></div>

    <div class="timeline-panel">

      <div class="tl-heading">

        <h4>Breaking into Spring!</h4>

        <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>

      </div>

      <div class="tl-body">

        <p>Hope the weather gets a bit nicer...</p>

 

        <p>Y‘know, with more sunlight.</p>

      </div>

    </div>

  </li>

 
从这里很容易理解每个气泡是如何创建的。列表项代表对象的时间轴,我们可以通过附加指定到对面。timeline-inverted类。列表项将几乎相同。
　　
.tl-circ是一个空的div创建蓝色的圈图标。.timeline-panel包含气泡本身使用一些详细的CSS伪元素的箭头。注意我们使用Glyphicons也将为每个帖子创建时钟图标

没有任何特定的规则如何需要设置每个项目时间轴。一些项目可能会有蓝色的圆圈图标但不是必要的。你也可以添加类.noarrow到时间轴面板完全删除箭头。这是一个非常灵活的设计有很多的定制空间。

页面样式
　　
自Bootstrap 提供了默认样式我们不需要从头开始创建很多。我已经更新了页面背景是黑色,标题文本颜色也已更新。不设置默认图像响应,所以我们通过添加max-width:100%做到这一点。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

body { background: #333; }

img { border: 0; max-width: 100%; }

 

.page-header h1 {

  font-size: 3.26em;

  text-align: center;

  color: #efefef;

  text-shadow: 1px 1px 0 #000;

}

 

/** timeline box structure **/

.timeline {

  list-style: none;

  padding: 20px 0 20px;

  position: relative;

}

 

.timeline:before {

  top: 0;

  bottom: 0;

  position: absolute;

  content: " ";

  width: 3px;

  background-color: #eee;

  left: 50%;

  margin-left: -1.5px;

}

 

.tldate {

  display: block;

  width: 200px;

  background: #414141;

  border: 3px solid #212121;

  color: #ededed;

  margin: 0 auto;

  padding: 3px 0;

  font-weight: bold;

  text-align: center;

  -webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);

}

 

.timeline li {

  margin-bottom: 25px;

  position: relative;

}

 
由于布局是响应时我们只看到它集中超过几百个像素。当降至更小的分辨率时间表将修复一侧和箱子将调整宽度。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

/** timeline panels **/

.timeline li .timeline-panel {

  width: 46%;

  float: left;

  background: #fff;

  border: 1px solid #d4d4d4;

  padding: 20px;

  position: relative;

  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  border-radius: 8px;

  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);

  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);

  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);

}

 

/** panel arrows **/

.timeline li .timeline-panel:before {

  position: absolute;

  top: 26px;

  right: -15px;

  display: inline-block;

  border-top: 15px solid transparent;

  border-left: 15px solid #ccc;

  border-right: 0 solid #ccc;

  border-bottom: 15px solid transparent;

  content: " ";

}

 

.timeline li .timeline-panel:after {

  position: absolute;

  top: 27px;

  right: -14px;

  display: inline-block;

  border-top: 14px solid transparent;

  border-left: 14px solid #fff;

  border-right: 0 solid #fff;

  border-bottom: 14px solid transparent;

  content: " ";

}

.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {

  top:0;

  right:0;

  display: none;

  border: 0;

}

 

.timeline li.timeline-inverted .timeline-panel {

  float: right;

}

 

.timeline li.timeline-inverted .timeline-panel:before {

  border-left-width: 0;

  border-right-width: 15px;

  left: -15px;

  right: auto;

}

 

.timeline li.timeline-inverted .timeline-panel:after {

  border-left-width: 0;

  border-right-width: 14px;

  left: -14px;

  right: auto;

}

 
在个人时间轴面板中可以看到每个箭头设计是如何创建的。使用:before 和after 也可以使用CSS没有任何图像生成的箭头。它还意味着.noarrow类很容易创建只有扭转的属性和完全消除箭头。
　　
每个面板自然定位到左边内容来自从左到右。但随着.timeline-inverted类它迫使个别项目浮动到右侧。

响应的CSS
　　
最后一部分style.css文档响应设计。我只设置两个独特的断点,定义这个接口的关键领域。
　　
　　首先在991px我更新时间轴面板宽度从46%降至44%。随着页面宽度下降较小的时间轴盒子靠近中心,但呆在相同的宽度。这意味着我们发现箭重叠的蓝色圆圈图标和看起来笨重。调整宽度很容易解决这个问题。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

/** media queries **/

@media (max-width: 991px) {

  .timeline li .timeline-panel {

    width: 44%;

  }

}

 

@media (max-width: 700px) {

  .page-header h1 { font-size: 1.8em; }

 

  ul.timeline:before {

    left: 40px;

  }

 

  .tldate { width: 140px; }

 

  ul.timeline li .timeline-panel {

    width: calc(100% - 90px);

    width: -moz-calc(100% - 90px);

    width: -webkit-calc(100% - 90px);

  }

 

  ul.timeline li .tl-circ {

    top: 22px;

    left: 22px;

    margin-left: 0;

 

  }

  ul.timeline > li > .tldate {

    margin: 0;

  }

 

  ul.timeline > li > .timeline-panel {

    float: right;

  }

 

  ul.timeline > li > .timeline-panel:before {

    border-left-width: 0;

    border-right-width: 15px;

    left: -15px;

    right: auto;

  }

 

  ul.timeline > li > .timeline-panel:after {

    border-left-width: 0;

    border-right-width: 14px;

    left: -14px;

    right: auto;

  }

}

 
一旦页面视窗下降或低于700 px,然后时间轴修复本身到左边。页面,而不是集中.timeline调整为小屏幕保持所有的时间轴面板右侧。
　　
这通常更容易理解,因为倒面板看起来就像普通面板。图片仍然可见,仍可点击链接,一切都仍容易阅读。我没有调整字体大小以外的页眉但你可能增加。

关闭
　　
虽然这种效果可能不是在每个网站上是有用的,它肯定是独一无二的,提供了一个相当有趣的经验。随着时间的推移,我们可能会注意到设计师会向这一清洁组织画廊的内容趋势。随意下载我的源代码,这种设计可以使用在未来的web项目。
时间： 2024-10-11 04:58:50

进度条与时间轴绑定显示图片的相关文章

圆角进度条，带数字居中显示的圆角进度条

自己实现一个圆角进度条,待文字显示居中的圆角进度条,这在很多实际项目当中都会用到的 github地址:https://github.com/yongfengnice/CircleProgress 效果图如下所示:

进度条、输入框文字提示、图片延迟加载、吸顶条

进度条:                            window.onload=function(){                                            var oBox1=document.getElementById("box1");                                            var oBox2=document.getElementById("box2");      

【转】Android UI系列-----时间、日期、Toasts和进度条Dialog

原文网址:http://www.cnblogs.com/xiaoluo501395377/p/3421727.html 您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内容有任何疑问, 可以通过评论或发邮件的方式联系我: [email protected] / [email protected] 如果需要转载,请注明出处,谢谢!! 本篇随笔将继续学

[转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择的特性: [html] <h1>滚轴控件</h1> <div class

HighCharts 图表插件 自定义绑定 时间轴数据

HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.html     学习示例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

javascript 进度条的几种方法

我们先看看最终效果: [url=169]169[/url] 第一步,基本构建基本的代码,看效果演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

带进度条的文件上传

Ajax技术——带进度条的文件上传 1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击“浏览”按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击“提交”按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来

h5实现手机端等级进度条

h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: var Config = { // 等级大图片url地址 courierRankBigUrl: 'images/grade2-icon.png', // 配送员等级名称 courierRankName: '3级鲜锋官', // 同时可接单数 courierCanPackgeCountDoing:

【转】Unity3d中制作Loading场景进度条所遇到的问题 LoadLevelAsync，AsyncOperation

背景 通常游戏的主场景包含的资源较多,这会导致加载场景的时间较长.为了避免这个问题,可以首先加载Loading场景,然后再通过Loading场景来加载主场景.因为Loading场景包含的资源较少,所以加载速度快.在加载主场景的时候一般会在Loading界面中显示一个进度条来告知玩家当前加载的进度.在Unity中可以通过调用Application.LoadLevelAsync函数来异步加载游戏场景,通过查询AsyncOperation.progress的值来得到场景加载的进度. 尝试--遇到问题