jQuery+HTML5+CSS3制作支持响应式布局时间轴插件


Posted in Javascript onAugust 10, 2016

jQuery时间轴插件效果图预览

jQuery+HTML5+CSS3制作支持响应式布局时间轴插件

   (图一)   

jQuery+HTML5+CSS3制作支持响应式布局时间轴插件

(图二)

附注说明: 

图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果。使用的是CSS3的Media Query(媒体查询)实现的效果。
 另外页面中圆形、圆角和三角同样使用了CSS3的特殊样式。这些基础的样式和效果在本文中不会赘述,不了解的童鞋可以上网搜索学习一下,很简单。 
页面上每个时间节点的展示内容提供了三种展示样式,多张图片的展示风格、单张图片的展示风格和无图片的展示风格。这些可以根据自己的需求自己更改。 

分析页面布局思路

页面的布局其实主要就是将外层的容器使用相对定位,容器内的元素使用绝对定位即可。具体的分析请看下图
 

jQuery+HTML5+CSS3制作支持响应式布局时间轴插件

依照图片上的分析就可以达到时间轴插件的布局展示效果。 

布局好了之后,我们就可以添加我们需要展现的内容了。为了页面不那么单调,可以使用JQuery的animate函数添加一些效果,比如可以让左侧的节点从页面左侧滑入页面,右侧节点从页面右侧滑入页面。代码简单,稍后贴出。 

加入滚动触发事件机制,动态加载时间节点 

在时间节点较多的情况下,一般情况下比如一个公司的发展历程和重大记事都不太可能只有三、五条信息吧,随着时间的推移,值得记录的大事件就会越多。如果一次就要让全部的信息展示在页面上可能会影响页面的展示效率,用户的体验也不会很好。
所以,可以利用触发滚动事件机制,每次加载固定的条数。这跟实现分页效果是一样的。只不过我们的触发条件是滚动触发。

注意事项:
1. 首次加载固定条数时,假设每次加载5条记录,如果首次加载5条后,没有出现滚动条,应该再次调用查询方法,继续加载,直到出现滚动条(否则首次加载5条后,没有出现滚动条,以后就无法触发滚动事件了,自然也就无法继续查询之后的记录了)。
2. 触发滚动事件,不能够只要滚动就触发,否则程序一直在触发加载记录方法,页面可能会无法由于频繁发送请求无法响应。解决方法,可以在滚动条滚动到页面底部的时候再触发加载记录方法。
具体的判定请看代码 

CSS代码 

.timeline-container{
  width:100%;
  /*height:auto;*/
}
.timeline{
  width:100%;
  margin:auto;
  position:relative;
  height: auto;
  padding:30px 0px 0px 0px;
}
.timeline > .timeline-block{
  width:50%;
}
.timeline-block > .popover{
  max-width: 70%;
}
.timeline > .timeline-block-odd{
  float:left;
}
.timeline > .timeline-block-even{
  float:right;
}
.timeline-block-odd>.timeline-content{
  display: block;
  position:relative;
  float:right;
  margin-right:50px;
}
.timeline-block-even>.timeline-content{
  display: block;
  float:left;
  position:relative;
  margin-left:50px;
}

.timeline-content > .arrow{
  top:20px !important;
  background: #f7f7f7;
}
.timeline-content > .popover-content{
  max-height: 240px;
  overflow-y: auto;
  color: #696969;
  font-size: 11px;
}

.timeline-content>.popover-footer{
  padding:8px 14px;
  margin:0px;
  font-size: 11px;
  border-top: 1px dotted #b9b9b9;
  color: #4b4b4b;
  background:#F2F2F2;
}
.timeline img{
  border:1px solid #dddddd;
  padding:2px;
}
.timeline-img{
  width:50px;
  height:50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  border:3px solid #A3E3E8;
  margin:auto;
  background: #ffffff;
  position:absolute;
  z-index: 9;
  left:50%;
  margin-left:-25px;
  background: url(../../indexImg/greeneye.jpg);
  background-size: cover;
}

.timeline-line{
  width:4px;
  height:100%;
  background: #aef0f5;
  position:absolute;
  z-index:8;
  left:50%;
  border-left:1px solid #aef0f5;
  border-right:1px solid #ffffff;
  margin-left: -2px;
  margin-top:-30px;
}

.timeline-block-odd>.popover.left>.arrow:after {
  right: 2px;
  border-left-color: #F7F7F7;
}
.timeline-block-even>.popover.right>.arrow:after {
  left: 2px;
  border-right-color: #F7F7F7;
}


/** mediaquery查询样式 **/
@media screen and (max-width: 560px){

  .timeline{
    width:100%;
    position:relative;
    height: auto;
    padding:30px 0px 0px 0px;
  }
  .timeline > .timeline-block{
    width:100%;
  }
  .timeline > .timeline-block-odd{
    float:right;
  }
  .timeline-block-odd>.timeline-content{
    display: block;
    position:relative;
    float:left;
    margin-left:75px;
  }
  .timeline-block-even>.timeline-content{
    display: block;
    position:relative;
    float:left;
    margin-left:75px;
  }

  .timeline-block-odd>.popover>.arrow, .timeline-block-odd>.popover>.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
  .timeline-block-odd>.popover.left>.arrow {
    left: -21px;
    bottom: -10px;
    content: " ";
    border-left-width: 0;
    border-right-color: #999;
    border-width: 10px;
  }

  .timeline-block-odd>.popover.left>.arrow:after {
    left:1px;
    right: 1px;
    bottom: -10px;
    content: " ";
    border-left-width: 0;
    border-right-color: #fff;
  }
  .timeline-block-odd>.popover>.arrow:after {
    content: "";
    border-width: 10px;
  }

  .timeline-img{
    width:50px;
    height:50px;
    margin:auto;
    background: #ffffff;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    border:3px solid #8e8e8e;
    position:absolute;
    z-index: 9;
    left:0;
    margin-left:0px;
  }

  .timeline-line{
    width:4px;
    height:100%;
    background: #d0d0d0;
    border-left:1px solid #ececec;
    border-right:1px solid #ececec;
    position:absolute;
    z-index:8;
    left:0;
    margin-left: 24px;
    margin-top:-30px;
  }


}

JQuery代码 

$(function(){
  var _timeline_row_ = $("<div></div>").addClass("row");
  $(".timeline-container").append(_timeline_row_);
  var loadData=function(){
    $.getJSON("timeline.json", function (data) {
      $.each(data, function (i, tl) {
        var _timeline_ = $("<div></div>").addClass("timeline");
        _timeline_row_.append(_timeline_);

        var _time_block_ = $("<div></div>").addClass("timeline-block");
        var _time_content_ = $("<div></div>").addClass("popover timeline-content");
        _time_block_.append(_time_content_);
        /**
         * 设置显示内容
         */

        var _popover_title_ = $("<h3></h3>").addClass("popover-title").text(tl["diagTime"]);
        var _popover_footer_ = $("<div></div>").addClass("popover-footer").text(tl["result"]);
        var _popover_content_ = $("<div></div>").addClass("popover-content");
        _time_content_.append($("<div></div>").addClass("arrow"))
          .append(_popover_title_)
          .append(_popover_content_)
          .append(_popover_footer_);
        /**
         * 主页展示内容布局
         */

        if (tl["images"].length > 1 && tl["images"] != "" && tl["images"] != null && tl["images"] != "undefined") {
          var _img_container_ = $("<div></div>").css("margin-bottom", "10px");
          var _table_container_ = $("<table></table>").addClass("table table-bordered table-condensed");
          for (var m = 0; m < tl["images"].length; m++) {
            _img_container_.append($("<img/>").attr("src", tl["images"][m]).css({"width":"60px","height":"60px","margin-right":"10px"}));
          }
          _popover_content_.append(_img_container_);
          _table_container_.append($("<tr></tr>")
              .append($("<td nowrap></td>").text("眼象特征"))
              .append($("<td></td>").text(tl["feature"]))
          );

          _table_container_.append($("<tr></tr>")
              .append($("<td nowrap></td>").text("匹配结果"))
              .append($("<td></td>").text(tl["matchList"]))
          );

          _table_container_.append($("<tr></tr>")
              .append($("<td nowrap></td>").text("结论说明"))
              .append($("<td></td>").text(tl["desc"]))
          );

          _popover_content_.append(_img_container_).append(_table_container_);

        } else if (tl["images"].length == 1 && tl["images"] != "" && tl["images"] != null && tl["images"] != "undefined") {
          var _img_container_ = $("<div></div>")
            .addClass("pull-left")
            .append($("<img/>").attr("src",tl["images"][0]).css({"margin": "5px 10px","width": "100px", "height": "100px"}));
          var _text_container_ = $("<p></p>").css({"margin-left": "10px", "margin-top": "5px", "font-size": "12px"})
            .append("眼象特征: " + tl["feature"]).append("<br/>")
            .append("匹配结果: " + tl["matchList"]).append("<br/>")
            .append("结论说明: " + tl["desc"]).append("<br/>");
          _popover_content_.append(_img_container_).append(_text_container_);
        } else if (tl["images"].length < 1 || tl["images"] == "" || tl["images"] == null || tl["images"] == "undefined") {
          var _text_container_ = $("<p></p>").css({"margin-left": "10px", "margin-top": "5px", "font-size": "12px"})
            .append("眼象特征: " + tl["feature"]).append("<br/>")
            .append("匹配结果: " + tl["matchList"]).append("<br/>")
            .append("结论说明: " + tl["desc"]).append("<br/>");
          _popover_content_.append(_img_container_).append(_text_container_);
        }

        $(_timeline_).append(_time_block_)
          .append($("<div></div>").addClass("timeline-img"))
          .append($("<div></div>").addClass("timeline-line"))
          .append($("<div></div>").addClass("clearfix"));
        if ($(_timeline_).prev().find(".timeline-block").hasClass("timeline-block-odd")) {
          $(_timeline_).find(".timeline-block").addClass("timeline-block-even");
          $(_timeline_).find(".timeline-block-even>.timeline-content").addClass("right").css({"left": "150px"});
        } else {
          $(_timeline_).find(".timeline-block").addClass("timeline-block-odd");
          $(_timeline_).find(".timeline-block-odd>.timeline-content").addClass("left").css({"left": "-150px"});
        }
        $(_timeline_).find(".timeline-block>.timeline-content").animate({
          left: "0px"
        }, 1000);
      });
      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();

});

总结一下: 
1. 本文偏重在时间轴的布局设置分析,主要是通过外层容器的相对定位和内层元素的绝对定位实现布局效果。 
2. 触发滚动事件机制,达到类似分页的加载效果。在触发滚动事件是要保证逻辑的严谨性。

比较久之前写的Demo了,Jquery插件写的不是很好,和CSS样式混杂在一起,也没有将其单独提取出来。不过作为分享学习使用还是可以的。正式开发的时候,不要像我这么写JS。
最后,依旧是感谢阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
vue实现登录拦截
Jun 29 Javascript
vuex实现购物车功能
Jun 28 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
基于js中的原型、继承的一些想法
Aug 10 #Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 #Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 #Javascript
jquery实现拖动效果
Aug 10 #Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 #Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 #Javascript
JS获取一个未知DIV高度的方法
Aug 09 #Javascript
You might like
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
Python-基础-入门 简介
2014/08/09 Python
Python打包可执行文件的方法详解
2016/09/19 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
员工薪酬福利制度
2014/01/17 职场文书
大学老师推荐信
2014/02/25 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
工作自我推荐信范文
2015/03/25 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python