jQuery时光轴插件_垂直滚动时光轴插件
2017-04-18 13:20:04  By: shinyuu

• shinyuu
• JQuery教程
• 2
• 4619
• 4

今天无意间发现一个非常棒的特效、一个非常棒的时光轴动画特效、jQuery旅行者竖直时间轴、Demo是一款时间轴样式代码、一般用于旅行者的行程等方面、而且在滑动的时候也有动画效果哦、可以先看看效果图

HTML代码

<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>
</section>

JS代码

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);
}

以上是Demo的部分代码片段以及使用方法、希望对大家有用、下面给大家贴上Demo的源代码下载

jquery时光轴插件实例Demo源代码下载链接: jquery时光轴插件 密码: rjap

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛