jQuery旅行者竖直时间轴特效代码下载

jQuery旅行者竖直时间轴特效代码下载

1. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>

2. HTML代码

<header class="site-header">
  <div class="wrapper">
    <h1 class="site-header__title">旅行者的时间表</h1>
  </div>
</header>
<section class="timeline">
  <div class="wrapper">
    <div class="timeline__item timeline__item--0">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1977 Aug. 20</h2>
        <p class="timeline__item__content__description">Voyager 2 launched from Kennedy Space Flight Center</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--1">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1977 Sept. 5</h2>
        <p class="timeline__item__content__description">Voyager 1 launched from Kennedy Space Flight Center, Voyager 1 returns first spacecraft photo of Earth and Moon</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--2">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1979 Mar. 5</h2>
        <p class="timeline__item__content__description">Voyager 1 makes its closest approach to Jupiter</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--3">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1979 July 9</h2>
        <p class="timeline__item__content__description">Voyager 2 makes its closest approach to Jupiter</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--4">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1980 Nov. 12</h2>
        <p class="timeline__item__content__description">Voyager 1 flies by Saturn, Voyager 1 begins its trip out of the Solar System</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--5">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1981 Aug. 25</h2>
        <p class="timeline__item__content__description">Voyager 2 flies by Saturn</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--6">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1982</h2>
        <p class="timeline__item__content__description">Deep Space Network upgrades two 26-m antennas to 34-m</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--7">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1986 Jan. 24</h2>
        <p class="timeline__item__content__description">Voyager 2 has the first-ever encounter with Uranus, Deep Space Network begins expansion of 64-m antennas to 70-m</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--8">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1987</h2>
        <p class="timeline__item__content__description">Voyager 2 'observes' Supernova 1987A</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--9">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1988</h2>
        <p class="timeline__item__content__description">Voyager 2 returns first color images of Neptune</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--10">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1989 Aug. 25</h2>
        <p class="timeline__item__content__description">Voyager 2 is the first spacecraft to observe Neptune, Voyager 2 begins its trip out of the Solar System, below the ecliptic plane</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--11">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1990 Jan. 1</h2>
        <p class="timeline__item__content__description">Begins Voyager Interstellar Mission</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--12">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1990 Feb. 14</h2>
        <p class="timeline__item__content__description">Last Voyager Images - Portrait of the Solar System</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--13">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">1998 Feb. 17</h2>
        <p class="timeline__item__content__description">Voyager 1 passes Pioneer 10 to become the most distant human-made object in space</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--14">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">2004 Dec. 15</h2>
        <p class="timeline__item__content__description">Voyager 1 crosses Termination Shock</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--15">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">2007 Sep. 5</h2>
        <p class="timeline__item__content__description">Voyager 2 crosses Termination Shock</p>
      </div>
    </div>
    <div class="timeline__item timeline__item--16">
      <div class="timeline__item__station"></div>
      <div class="timeline__item__content">
        <h2 class="timeline__item__content__date">2012 Aug. 25</h2>
        <p class="timeline__item__content__description">Voyager 1 enters Interstellar Space</p>
      </div>
    </div>
  </div>
</section>
<script>
function customWayPoint(className, addClassName, customOffset) {
  var waypoints = $(className).waypoint({
    handler: function(direction) {
      if (direction == "down") {
        $(className).addClass(addClassName);
      } else {
        $(className).removeClass(addClassName);
      }
    },
    offset: customOffset
  });
}
var defaultOffset = '50%';
for (i = 0; i < 17; i++) {
  customWayPoint('.timeline__item--' + i, 'timeline__item-bg', defaultOffset);
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到