Vue 2.0 Hello World

HTML

<div id="fullpage">
  <div class="page">1</div>
  <div class="page">2</div>
  <div class="page">3</div>
  <div class="page">4</div>
  <div class="page">5</div>
  <div class="page">6</div>
</div>
<div class="down-around" id="down-around"></div>

CSS

*{
  padding:0;
  margin:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,body{
  height: 100%;
  overflow: hidden;
}
body{
  transition: 1s transform;
}

#fullpage{
  position: relative;
}
#fullpage .page{
  font-size: 50px;
}
#fullpage .page:nth-child(odd) {
  background: lightblue;
}
#fullpage .page:nth-child(even) {
  background: lightpink;
}
.down-around{
  width: 100px;
  height: 100px;
  background: #000;
  position: fixed;
  left: 50%;
  bottom: 50px;
  margin-left: -25px;
}

CoffeeScript

$(function() {
    $.fn.fullpage = function(options) {
      // 拖拽
      var start = 0;
      var end = 0;
      var pageIndex = 1;
      var len = $('#fullpage .page').length;
      var winHeight = $(window).height();
      var _this = $(this);
      var downBar = $('#down-around');

      _this.find('.page').height(winHeight);

      $(document).mousedown(function(e) {
        start = e.pageY
      }).mouseup(function(e) {
        end = e.pageY
        if (end===start) return
        if (end>start) {
          if (pageIndex === 1) {
            pageIndex = len
          } else {
            pageIndex--
          }
        } else {
          if (pageIndex===len) {
            pageIndex = 1
          } else {
            pageIndex ++
          }
        }

        toPage()
      })

      downBar.click(function() {
        pageIndex ++
        toPage()
      })

      function toPage() {
        if (pageIndex === len) {
          downBar.hide()
        } else {
          downBar.show()
        }
        var dis = -1 * (pageIndex-1) * winHeight + 'px';
        if (options.css3) {
          _this.css({
            transform: translate(dis)
          })
        } else {
          _this.animate({
            top: dis
          }, 500)
        }
      }
    }

    $('#fullpage').fullpage({
      css3: true
    });    
  })