基于Bootstrap垂直响应的jQuery时间轴特效

最新推荐文章于 2024-08-08 07:45:19 发布

q平面人

最新推荐文章于 2024-08-08 07:45:19 发布

阅读量2w

点赞数 5

分类专栏： golang beego engineercms 文章标签：时间轴 golang engineercms beego bootstrap

本文链接：https://blog.csdn.net/hotqin888/article/details/63683690

版权

golang 同时被 3 个专栏收录

144 篇文章 2 订阅

订阅专栏

beego

128 篇文章 0 订阅

订阅专栏

engineercms

72 篇文章 0 订阅

订阅专栏

终于想清楚了在每个项目中，放置3个东西：操作记录（日志）；时间轴（大事记）；日历日程。
第一个日志是系统自动记录的，每次在这个项目下的操作，比如上传，添加，删除，查阅，下载等都记录在案，方便查阅。
第二个，大事记的时间轴，很流行。
第三个日历日程事件，记录一些非大事记中。
当然，初步考虑还是在日历日程上添加、删除大事记，在添加日历日程事件的时候，提供一个单选按钮：是否作为大事记。如果作为大事记，则时间轴上会显示这个事件。

这个时间轴整合了3个模板，一个是timelined；——支持时间轴线上的图标效果。
一个是http://www.jqueryfuns.com/resource/1155——喜欢它设计的版面。
一个是http://www.cnblogs.com/chunyangji/p/5753374.html——支持鼠标触发事件，不断加载。

最后效果就是这样子：支持鼠标滚轮触发。

<!-- 测试时间轴 -->
<!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="/static/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" media="all" href="/static/css/bootstrap-glyphicons.css">
  <link rel="stylesheet" type="text/css" media="all" href="/static/css/timeline.css">

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

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

<body>
	<div class="container">
	  <header class="page-header">
	    <h1>Dark Responsive Timeline with Bootstrap</h1>
	    <h1><small>黑色Bootstrap响应式时间轴</small></h1>
	  </header>
	  
	  <ul class="timeline">

  	</ul>
	</div>


<script type="text/javascript">
	$(function(){
  	var _timeline_date_ = $("<li><div class='tldate'>Apr 2017<div><li>");
  	$(".timeline").append(_timeline_date_);
  	var loadData=function(){
    	$.getJSON("/test", function (data) {
      	$.each(data, function (i, tl) {
					if(i%2==1){
						var _timeline_invert_ = $("<li></li>");
					}else{
						var _timeline_invert_ = $("<li></li>").addClass("timeline-inverted");
					}

        	$(".timeline").append(_timeline_invert_);

        	var _timeline_icon_ = $("<div></div>").addClass("timeline-icon timeline-icon-hide-border");
        	var _timeline_fa_ = $("<i style='color:#c23b22'></i>").addClass("fa fa-github fa-lg");
        	_timeline_icon_.append(_timeline_fa_);
        	_timeline_invert_.append(_timeline_icon_);
        	/**
        	 * 设置显示内容
        	 */

					var _timeline_panel_ = $("<div></div>").addClass("timeline-panel");
					var _timeline_head_ = $("<div></div>").addClass("tl-heading");
					var _timeline_body_ = $("<div></div>").addClass("tl-body");

					var _timeline_body_p1_ = $("<p></p>").text(tl["feature"]);
					_timeline_body_.append(_timeline_body_p1_);
					var _timeline_body_p2_ = $("<p></p>");
					_timeline_body_p2_.append($("<img/>").attr("src",tl["images"][0]));
					_timeline_body_.append(_timeline_body_p1_);
					_timeline_body_.append(_timeline_body_p2_);

        	var _timeline_head_h4_ = $("<h4></h4>").text(tl["diagDoc"]);
					var _timeline_head_p_ = $("<p></p>");
					var _timeline_head_p_small_ = $("<small class='text-muted'></small>");
					var _timeline_head_p_small_i_ = $("<i class='glyphicon glyphicon-time'></i>");
					_timeline_head_p_small_.append(_timeline_head_p_small_i_);
					_timeline_head_p_small_.append(tl["diagTime"]);

					_timeline_head_p_.append(_timeline_head_p_small_);

					_timeline_head_.append(_timeline_head_h4_);
					_timeline_head_.append(_timeline_head_p_);

					_timeline_panel_.append(_timeline_head_);
					_timeline_panel_.append(_timeline_body_);

					_timeline_invert_.append(_timeline_panel_);
      	});

      	if($(window).height()>=document.documentElement.scrollHeight){
      	  //没有出现滚动条,继续加载下一页
      	  loadData();
      	}
    	});
  	}

  var tcScroll=function(){
    $(window).on('scroll', function () {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if (scrollTop + windowHeight == scrollHeight) {
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        loadData();
      }
    })
  }
  loadData();
  tcScroll();

});

	</script>

	</body>
</html>

服务器端json数据格式

func (c *AdminController) Test() {
	c.Data["Website"] = "beego.me"
	c.Data["Email"] = "astaxie@gmail.com"
	c.TplName = "user_show.tpl"

	imagelist1 := []string{"/static/img/1.jpg", "/static/img/2.jpg", "/static/img/3.jpg"}
	imagelist2 := []string{"/static/img/4.jpg", "/static/img/5.jpg", "/static/img/6.jpg"}
	imagelist3 := []string{"/static/img/7.jpg", "/static/img/8.jpg", "/static/img/9.jpg"}
	imagelist4 := []string{"/static/img/10.jpg", "/static/img/11.jpg", "/static/img/12.jpg"}
	imagelist5 := []string{"/static/img/13.jpg", "/static/img/14.jpg", "/static/img/15.jpg"}
	imagelist6 := []string{"/static/img/16.jpg", "/static/img/17.jpg", "/static/img/18.jpg"}

	listimage1 := Listimage{
		1,
		"uer0001",
		"2017/03/18",
		"秦晓川",
		"通过图像识别获得眼像特征",
		"知识库自动获取的饼子",
		"根据病症信息分析结果",
		"\n\t对综合揭露进行\n\t\t\t 行详细描述",
		imagelist1,
		"2017-03-18",
		"",
	}
	listimage2 := Listimage{
		2,
		"uer0002",
		"2017/03/14",
		"秦晓川2",
		"识别技术更新",
		"来自库",
		"分析结果",
		"\n\t对综合\n\t\t\t 详细描述",
		imagelist2,
		"2017-03-13",
		"",
	}
	listimage3 := Listimage{
		3,
		"uer0003",
		"2017/03/10",
		"秦晓川3",
		"特征",
		"自动获取",
		"根据结果",
		"\n\t进行\n\t\t\t 详细描述",
		imagelist3,
		"2017-03-10",
		"",
	}
	listimage4 := Listimage{
		4,
		"uer0004",
		"2017/03/02",
		"秦晓川4",
		"通过特征",
		"知识库",
		"分析结果",
		"\n\t综合揭露\n\t\t\t 描述",
		imagelist4,
		"2014-07-13",
		"",
	}
	listimage5 := Listimage{
		5,
		"uer0005",
		"2016/07/14",
		"秦晓川5",
		"通过图像识别获得眼像特征",
		"知识库自动获取的饼子",
		"根据病症信息分析结果",
		"\n\t对综合揭露进行\n\t\t\t 行详细描述",
		imagelist5,
		"2014-07-13",
		"",
	}
	listimage6 := Listimage{
		6,
		"uer0006",
		"2015/07/14",
		"秦晓川6",
		"眼像特征",
		"获取",
		"信息结果",
		"\n\t揭露进行\n\t\t\t 详细描述",
		imagelist6,
		"2014-07-13",
		"",
	}
	listimage := []Listimage{listimage1, listimage2, listimage3, listimage4, listimage5, listimage6}
	c.Data["json"] = listimage

	c.ServeJSON()
}