基于Bootstrap垂直响应的jQuery时间轴特效
基于Bootstrap垂直响应的jQuery时间轴特效
hotqin888
发布于 2018-09-11 15:00:03
发布于 2018-09-11 15:00:03
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1334462
终于想清楚了在每个项目中，放置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()
}
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年03月19日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读