欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery+HTML5+CSS3制作支持響應(yīng)式布局時(shí)間軸插件

 更新時(shí)間：2016年08月10日 09:20:39   作者：Jeremy陽(yáng)仔  
這篇文章主要為大家詳細(xì)介紹了JQuery+HTML5+CSS3制作時(shí)間軸,支持響應(yīng)式布局時(shí)間軸插件，感興趣的小伙伴們可以參考一下

jQuery時(shí)間軸插件效果圖預(yù)覽

   （圖一）   

（圖二）

附注說(shuō)明： 

圖一是瀏覽器寬度像素大于560px下的展示效果，圖二是在瀏覽器寬度像素小于560px下的展現(xiàn)效果。使用的是CSS3的Media Query（媒體查詢(xún)）實(shí)現(xiàn)的效果。
 另外頁(yè)面中圓形、圓角和三角同樣使用了CSS3的特殊樣式。這些基礎(chǔ)的樣式和效果在本文中不會(huì)贅述，不了解的童鞋可以上網(wǎng)搜索學(xué)習(xí)一下，很簡(jiǎn)單。 
頁(yè)面上每個(gè)時(shí)間節(jié)點(diǎn)的展示內(nèi)容提供了三種展示樣式，多張圖片的展示風(fēng)格、單張圖片的展示風(fēng)格和無(wú)圖片的展示風(fēng)格。這些可以根據(jù)自己的需求自己更改。 

分析頁(yè)面布局思路

頁(yè)面的布局其實(shí)主要就是將外層的容器使用相對(duì)定位，容器內(nèi)的元素使用絕對(duì)定位即可。具體的分析請(qǐng)看下圖
 

依照?qǐng)D片上的分析就可以達(dá)到時(shí)間軸插件的布局展示效果。 

布局好了之后，我們就可以添加我們需要展現(xiàn)的內(nèi)容了。為了頁(yè)面不那么單調(diào)，可以使用JQuery的animate函數(shù)添加一些效果，比如可以讓左側(cè)的節(jié)點(diǎn)從頁(yè)面左側(cè)滑入頁(yè)面，右側(cè)節(jié)點(diǎn)從頁(yè)面右側(cè)滑入頁(yè)面。代碼簡(jiǎn)單，稍后貼出。 

加入滾動(dòng)觸發(fā)事件機(jī)制，動(dòng)態(tài)加載時(shí)間節(jié)點(diǎn) 

在時(shí)間節(jié)點(diǎn)較多的情況下，一般情況下比如一個(gè)公司的發(fā)展歷程和重大記事都不太可能只有三、五條信息吧，隨著時(shí)間的推移，值得記錄的大事件就會(huì)越多。如果一次就要讓全部的信息展示在頁(yè)面上可能會(huì)影響頁(yè)面的展示效率，用戶(hù)的體驗(yàn)也不會(huì)很好。
所以，可以利用觸發(fā)滾動(dòng)事件機(jī)制，每次加載固定的條數(shù)。這跟實(shí)現(xiàn)分頁(yè)效果是一樣的。只不過(guò)我們的觸發(fā)條件是滾動(dòng)觸發(fā)。

注意事項(xiàng)：
1. 首次加載固定條數(shù)時(shí)，假設(shè)每次加載5條記錄，如果首次加載5條后，沒(méi)有出現(xiàn)滾動(dòng)條，應(yīng)該再次調(diào)用查詢(xún)方法，繼續(xù)加載，直到出現(xiàn)滾動(dòng)條（否則首次加載5條后，沒(méi)有出現(xiàn)滾動(dòng)條，以后就無(wú)法觸發(fā)滾動(dòng)事件了，自然也就無(wú)法繼續(xù)查詢(xún)之后的記錄了）。
2. 觸發(fā)滾動(dòng)事件，不能夠只要滾動(dòng)就觸發(fā)，否則程序一直在觸發(fā)加載記錄方法，頁(yè)面可能會(huì)無(wú)法由于頻繁發(fā)送請(qǐng)求無(wú)法響應(yīng)。解決方法，可以在滾動(dòng)條滾動(dòng)到頁(yè)面底部的時(shí)候再觸發(fā)加載記錄方法。
具體的判定請(qǐng)看代碼 

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查詢(xún)樣式 **/
@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_);
        /**
         * 設(shè)置顯示內(nèi)容
         */

        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_);
        /**
         * 主頁(yè)展示內(nèi)容布局
         */

        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("匹配結(jié)果"))
              .append($("<td></td>").text(tl["matchList"]))
          );

          _table_container_.append($("<tr></tr>")
              .append($("<td nowrap></td>").text("結(jié)論說(shuō)明"))
              .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("匹配結(jié)果: " + tl["matchList"]).append("<br/>")
            .append("結(jié)論說(shuō)明: " + 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("匹配結(jié)果: " + tl["matchList"]).append("<br/>")
            .append("結(jié)論說(shuō)明: " + 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){
        //沒(méi)有出現(xiàn)滾動(dòng)條,繼續(xù)加載下一頁(yè)
        loadData();
      }

    });


  }

  var tcScroll=function(){
    $(window).on('scroll', function () {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if (scrollTop + windowHeight == scrollHeight) {
        //此處是滾動(dòng)條到底部時(shí)候觸發(fā)的事件，在這里寫(xiě)要加載的數(shù)據(jù)，或者是拉動(dòng)滾動(dòng)條的操作
        loadData();
      }
    })
  }
  loadData();
  tcScroll();

});

總結(jié)一下： 
1. 本文偏重在時(shí)間軸的布局設(shè)置分析，主要是通過(guò)外層容器的相對(duì)定位和內(nèi)層元素的絕對(duì)定位實(shí)現(xiàn)布局效果。 
2. 觸發(fā)滾動(dòng)事件機(jī)制，達(dá)到類(lèi)似分頁(yè)的加載效果。在觸發(fā)滾動(dòng)事件是要保證邏輯的嚴(yán)謹(jǐn)性。

比較久之前寫(xiě)的Demo了，Jquery插件寫(xiě)的不是很好，和CSS樣式混雜在一起，也沒(méi)有將其單獨(dú)提取出來(lái)。不過(guò)作為分享學(xué)習(xí)使用還是可以的。正式開(kāi)發(fā)的時(shí)候，不要像我這么寫(xiě)JS。
最后，依舊是感謝閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論