console 命令行工具 X clear

console

/*引入 jquery.timelinr插件*/

$(function(){
	$("#timeline").timelinr()
});

/*直接放入*/
/* ----------------------------------
jQuery Timelinr 0.9.7
tested with jQuery v1.6+
Copyright 2011, CSSLab.cl
Free under the MIT license.
http://www.opensource.org/licenses/mit-license.php
instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/
---------------------------------- */

jQuery.fn.timelinr = function(options){
  // default plugin settings
  settings = jQuery.extend({
    orientation:              'horizontal', // value: horizontal | vertical, default to horizontal
    containerDiv:             '#timeline',  // value: any HTML tag or #id, default to #timeline
    datesDiv:                 '#dates',     // value: any HTML tag or #id, default to #dates
    datesSelectedClass:       'selected',   // value: any class, default to selected
    datesSpeed:               'normal',     // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
    issuesDiv:                '#issues',    // value: any HTML tag or #id, default to #issues
    issuesSelectedClass:      'selected',   // value: any class, default to selected
    issuesSpeed:              'fast',       // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
    issuesTransparency:       0.2,          // value: integer between 0 and 1 (recommended), default to 0.2
    issuesTransparencySpeed:  500,          // value: integer between 100 and 1000 (recommended), default to 500 (normal)
    prevButton:               '#prev',      // value: any HTML tag or #id, default to #prev
    nextButton:               '#next',      // value: any HTML tag or #id, default to #next
    arrowKeys:                'false',      // value: true | false, default to false
    startAt:                  1,            // value: integer, default to 1 (first)
    autoPlay:                 'false',      // value: true | false, default to false
    autoPlayDirection:        'forward',    // value: forward | backward, default to forward
    autoPlayPause:            2000          // value: integer (1000 = 1 seg), default to 2000 (2segs)
  }, options);

  $(function(){
    // Checks if required elements exist on page before initializing timelinr | improvement since 0.9.55
    if ($(settings.datesDiv).length > 0 && $(settings.issuesDiv).length > 0) {
      // setting variables... many of them
      var howManyDates = $(settings.datesDiv+' li').length;
      var howManyIssues = $(settings.issuesDiv+' li').length;
      var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
      var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
      var widthContainer = $(settings.containerDiv).width();
      var heightContainer = $(settings.containerDiv).height();
      var widthIssues = $(settings.issuesDiv).width();
      var heightIssues = $(settings.issuesDiv).height();
      var widthIssue = $(settings.issuesDiv+' li').width();
      var heightIssue = $(settings.issuesDiv+' li').height();
      var widthDates = $(settings.datesDiv).width();
      var heightDates = $(settings.datesDiv).height();
      var widthDate = $(settings.datesDiv+' li').width();
      var heightDate = $(settings.datesDiv+' li').height();
      // set positions!
      if(settings.orientation == 'horizontal') {
        $(settings.issuesDiv).width(widthIssue*howManyIssues);
        $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
        var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
      } else if(settings.orientation == 'vertical') {
        $(settings.issuesDiv).height(heightIssue*howManyIssues);
        $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
        var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
      }

      $(settings.datesDiv+' a').click(function(event){
        event.preventDefault();
        // first vars
        var whichIssue = $(this).text();
        var currentIndex = $(this).parent().prevAll().length;
        // moving the elements
        if(settings.orientation == 'horizontal') {
          $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
        } else if(settings.orientation == 'vertical') {
          $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
        }
        $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
        // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date
        if(howManyDates == 1) {
          $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
        } else if(howManyDates == 2) {
          if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
            $(settings.prevButton).fadeOut('fast');
            $(settings.nextButton).fadeIn('fast');
          }
          else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
            $(settings.nextButton).fadeOut('fast');
            $(settings.prevButton).fadeIn('fast');
          }
        } else {
          if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
            $(settings.nextButton).fadeIn('fast');
            $(settings.prevButton).fadeOut('fast');
          }
          else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
            $(settings.prevButton).fadeIn('fast');
            $(settings.nextButton).fadeOut('fast');
          }
          else {
            $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
          }
        }
        // now moving the dates
        $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
        $(this).addClass(settings.datesSelectedClass);
        if(settings.orientation == 'horizontal') {
          $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
        } else if(settings.orientation == 'vertical') {
          $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
        }
      });

      $(settings.nextButton).bind('click', function(event){
        event.preventDefault();
        // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
        var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
        if(settings.orientation == 'horizontal') {
          var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
          var currentIssueIndex = currentPositionIssues/widthIssue;
          var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
          var currentIssueDate = currentPositionDates-widthDate;
          if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
            $(settings.issuesDiv).stop();
            $(settings.datesDiv+' li:last-child a').click();
          } else {
            if (!$(settings.issuesDiv).is(':animated')) {
              // bugixed from 0.9.52: now the dates gets centered when there's too much dates.
              $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
            }
          }
        } else if(settings.orientation == 'vertical') {
          var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
          var currentIssueIndex = currentPositionIssues/heightIssue;
          var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
          var currentIssueDate = currentPositionDates-heightDate;
          if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
            $(settings.issuesDiv).stop();
            $(settings.datesDiv+' li:last-child a').click();
          } else {
            if (!$(settings.issuesDiv).is(':animated')) {
              // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
              $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
            }
          }
        }
        // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
        if(howManyDates == 1) {
          $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
        } else if(howManyDates == 2) {
          if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
            $(settings.prevButton).fadeOut('fast');
            $(settings.nextButton).fadeIn('fast');
          }
          else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
            $(settings.nextButton).fadeOut('fast');
            $(settings.prevButton).fadeIn('fast');
          }
        } else {
          if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
            $(settings.prevButton).fadeOut('fast');
          }
          else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
            $(settings.nextButton).fadeOut('fast');
          }
          else {
            $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
          }
        }
      });

      $(settings.prevButton).click(function(event){
        event.preventDefault();
        // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
        var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
        if(settings.orientation == 'horizontal') {
          var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
          var currentIssueIndex = currentPositionIssues/widthIssue;
          var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
          var currentIssueDate = currentPositionDates+widthDate;
          if(currentPositionIssues >= 0) {
            $(settings.issuesDiv).stop();
            $(settings.datesDiv+' li:first-child a').click();
          } else {
            if (!$(settings.issuesDiv).is(':animated')) {
              // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
              $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
            }
          }
        } else if(settings.orientation == 'vertical') {
          var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
          var currentIssueIndex = currentPositionIssues/heightIssue;
          var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
          var currentIssueDate = currentPositionDates+heightDate;
          if(currentPositionIssues >= 0) {
            $(settings.issuesDiv).stop();
            $(settings.datesDiv+' li:first-child a').click();
          } else {
            if (!$(settings.issuesDiv).is(':animated')) {
              // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
              $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
            }
          }
        }
        // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
        if(howManyDates == 1) {
          $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
        } else if(howManyDates == 2) {
          if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
            $(settings.prevButton).fadeOut('fast');
            $(settings.nextButton).fadeIn('fast');
          }
          else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
            $(settings.nextButton).fadeOut('fast');
            $(settings.prevButton).fadeIn('fast');
          }
        } else {
          if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
            $(settings.prevButton).fadeOut('fast');
          }
          else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
            $(settings.nextButton).fadeOut('fast');
          }
          else {
            $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
          }
        }
      });
      // keyboard navigation, added since 0.9.1
      if(settings.arrowKeys=='true') {
        if(settings.orientation=='horizontal') {
          $(document).keydown(function(event){
            if (event.keyCode == 39) {
                 $(settings.nextButton).click();
              }
            if (event.keyCode == 37) {
                 $(settings.prevButton).click();
              }
          });
        } else if(settings.orientation=='vertical') {
          $(document).keydown(function(event){
            if (event.keyCode == 40) {
                 $(settings.nextButton).click();
              }
            if (event.keyCode == 38) {
                 $(settings.prevButton).click();
              }
          });
        }
      }
      // default position startAt, added since 0.9.3
      $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
      // autoPlay, added since 0.9.4
      if(settings.autoPlay == 'true') {
        // set default timer
        var timer = setInterval(autoPlay, settings.autoPlayPause);
        // pause autoplay on hover
        $(settings.containerDiv).hover(function(ev){
          clearInterval(timer);
        }, function(ev){
          // start again timer on mouse out
          timer = setInterval(autoPlay, settings.autoPlayPause);
        });
        
      }
    }
  });
}

// autoPlay, added since 0.9.4
function autoPlay(){
  var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
  if(settings.autoPlayDirection == 'forward') {
    if(currentDate.parent().is('li:last-child')) {
      $(settings.datesDiv+' li:first-child').find('a').trigger('click');
    } else {
      currentDate.parent().next().find('a').trigger('click');
    }
  } else if(settings.autoPlayDirection == 'backward') {
    if(currentDate.parent().is('li:first-child')) {
      $(settings.datesDiv+' li:last-child').find('a').trigger('click');
    } else {
      currentDate.parent().prev().find('a').trigger('click');
    }
  }
}

<div id="timeline">
	<ul id="issues">
		<li id="1900">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
		<li id="1944">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
		<li id="1950">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
		<li id="1971">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
		<li id="1999">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
		<li id="2001">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
		<li id="2011">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
		<li id="2012">
			<div class="honor-img"><img src="http://img.htmleaf.com/1602/201602041638.jpg"></div>
			<div class="honor-cont">
			  <p class="h1">2018</p>
			  <p class="h2">高新技术企业证书</p>
			  <p class="h3">2018年，根据国家高新技术企业评价结果，艾基生物被授予行业“最高技术企业证书”。</p>
			</div>
		</li>
	</ul>
	<div class="gt-timeline">
	<div class="main_line"></div>
	<ul id="dates">
		<li>
		  <a href="#">
		     <div class="horizontal-line month-line odd-month" style="left: 39px"></div>
             <div class="horizontal-line month-line even-month" style="left: 75px">
               <div class="month">2005</div>
             </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <div class="horizontal-line month-line odd-month" style="left: 111px"></div>
            <div class="horizontal-line month-line even-month" style="left: 147px">
               <div class="month">2010</div>
            </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <div class="horizontal-line month-line odd-month" style="left: 183px"></div>
            <div class="horizontal-line month-line even-month" style="left: 219px">
              <div class="month">2012</div>
            </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <div class="horizontal-line month-line odd-month" style="left: 255px"></div>
            <div class="horizontal-line month-line even-month" style="left: 291px">
              <div class="month">2013</div>
            </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <div class="horizontal-line month-line odd-month" style="left: 327px"></div>
            <div class="horizontal-line month-line even-month" style="left: 363px">
              <div class="month">2014</div>
            </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		    <div class="horizontal-line month-line odd-month" style="left: 399px"></div>
            <div class="horizontal-line month-line even-month" style="left: 435px">
               <div class="month">2015</div>
            </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		     <div class="horizontal-line month-line odd-month" style="left: 471px"></div>
             <div class="horizontal-line month-line even-month" style="left: 507px">
               <div class="month">2017</div>
             </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		     <div class="horizontal-line month-line odd-month" style="left: 543px"></div>
             <div class="horizontal-line month-line even-month" style="left: 579px">
               <div class="month">2018</div>
             </div>
		  </a>
		</li>
		<li>
		  <a href="#">
		     <div class="horizontal-line month-line odd-month" style="left: 615px"></div>
             <div class="horizontal-line month-line even-month" style="left: 651px">
               <div class="month">未来</div>
             </div>
		  </a>
		</li>
	</ul>
	</div>
	<a href="#" id="next"></a>
	<a href="#" id="prev"></a>
</div>

#timeline{width:1120px;overflow:hidden;margin:40px auto 0 auto;position:relative;}
#dates{width:700px !important;overflow:hidden;margin-top:20px;position:relative;margin:0 auto !important;}
#dates li{float:left;width:94px;height:90px;font-size:16px;text-align:center;list-style: none;}
#dates a{color:#713611;width:94px;height:90px;display:block;}
#dates .selected .horizontal-line{border-left:2px solid #0076c0;}
#dates .selected .month{color:#0076c0;}
#issues{width:1120px;overflow:hidden;}
#issues li{width:1120px;list-style:none;float:left;}
#issues li img{text-align:center;display:block;margin:0 auto;}
#next1,#prev1{position:absolute;top:90px;text-align:center;overflow:hidden;background-size:100% 100%;width:50px;height:101px;display:block;}
#next1{right:35.5%;margin-right:-400px;background:url(https://note.youdao.com/yws/api/personal/file/875110B6113446A5A73D82457C64937F?method=download&shareKey=84c20a9fcaf26a171974503ea44fd16d)no-repeat center top;}
#prev1{left:35.5%;margin-left:-400px;background:url(https://note.youdao.com/yws/api/personal/file/94F1202892A74D6888E860290FB6B2E5?method=download&shareKey=2ae7351496d79d4aeaaae8db73245e1d)no-repeat center top;}
#next1.disabled,#prev1.disabled{opacity:0.2;}
.gt-timeline {position: relative;width: 100%;}
.main_line {border: none;border-top: 3px solid #e2e2e2;clear: both;height: 0;width: 100%;position: absolute;top: 50px;z-index: 0;}
.time{position:relative;left:200px;}
.odd-month {top: 41px !important;height: 10px !important;border-left: 1px solid #e2e2e2 !important;}
.even-month {top: 37px;}
.month-line {height: 15px;border-left: 2px solid #909090;}
.horizontal-line {border: 0px;border-left: 2px solid #909090;clear: both;height: 15px;width: 0px;position: absolute;z-index: 1;top: 35px;}
.even-month .month {position: relative;top: 30px;left: -10px;white-space: nowrap;color:#6b6b6b;font-size:12px;}
.honor-img{padding:20px;background:#f6f6f6;float:left;margin-left:95px;margin-right:65px;width:36%;}
.honor-img img{width:100%;}
.honor-cont{float:left;width:45%;margin-top:50px;text-align: left;}
.h1{font-size:16px;color:#0076c0;font-weight:bold;line-height: 27px;}
.h2{font-size:22px;color:#000000;padding-bottom:30px;}
.h3{font-size:16px;color:#737171;width:80%;}

本项目引用的自定义外部资源

jquery.js