Xuanmo Blog

jQuery封装插件语法格式：

第一次写jQuery插件，在写这个插件的时候，还是学到一点东西，在不会的地方用百度搜了答案，也算是对自己的一个知识巩固，有什么不对的地方望大神指点，谢谢 /kiss

(function($){
  $.fn.PluginName = function(){
    //PluginName = 插件名称
    //this = jQuery代理对象
  }
})(jQuery);
//调用方法
$('xxx').PluginName();

 

插件共有5个参数，json方式传入
参数名                           参数值
1. pageList:                    $('.ui-page') jQuery代理对象，滚动页元素
2. pageBtnWrap:                 $('.ui-page-wrap') jQuery代理对象，滚动按钮的容器
3. transition:                  1000 动画过渡时间，默认时间1000
4. beforeFunction:              function() {} 匿名函数，在动画执行之前需要执行的函数
5. callback:                    function( currentIndex, maxIndex ) {} 匿名函数，每屏动画执行完成需要做的事情，可传入两个参数
                                    currentIndex: 当前可见元素的索引值
                                    maxIndex: 所有全屏滚动元素的length

 

演示页面html代码如下：

<ul class="ui-page-wrap">
    <li class="ui-page">
        <img src="http://file.xuanmomo.com/T1-150.jpg" class="left" alt="">
        <h2 class="right">文字信息</h2>
        <h2 class="callback-txt">回调函数文字第一页</h2>
    </li>
    <li class="ui-page">
        <h2 class="left">文字信息</h2>
        <img src="http://file.xuanmomo.com/T10-150.jpg" class="right" alt="">
        <h2 class="callback-txt">回调函数文字二</h2>
    </li>
    <li class="ui-page">
        <h2 class="callback-txt">回调函数文字三</h2>
    </li>
</ul>

 

插件源码

/* 定义每屏高度 */
html, body, .ui-page-wrap, .ui-page { width: 100%; height: 100%; }
/* 右边的指示按钮 */
.ui-btn-wrap { position: fixed; top: 50%; right: 30px; }
.ui-btn-wrap li { width: 15px; height: 15px; margin-bottom: 10px; border-radius: 50%; background: #fff; }
.ui-btn-wrap li.on { background: #3f908c; }

 

(function($) {
  function Page(element, options) {
    this.pageList = options.pageList;
    this.btnList = null;
    this.differ = 1;
    this.dire = 1;
    this.nIndex = element.attr('data-index'),
      this.pageBtnWrap = options.pageBtnWrap;
    this.beforeFunction = options.beforeFunction;
    this.callback = options.callback;
    this.maxIndex = this.pageList.length - 1;
    this.transition = options.transition;
  }

  Page.prototype = {
    constructor: Page,
    // 初始化
    init: function($this) {
      var This = this;
      // 创建滚动按钮容器
      $this.attr('data-index', 0);
      this.pageBtnWrap = this.pageBtnWrap ||
        (function() {
          $this.after('
');
          return $('.ui-btn-wrap');
        }());

      // 生成滚动按钮
      this.pageList.each(function(i) {
        This.pageBtnWrap.append('
');
      });

      // 保存滚动按钮并为第一个添加class
      this.btnList = this.pageBtnWrap.children();
      this.btnList.first().addClass('on');

      // 滚动按钮容器计算顶部偏移量
      this.pageBtnWrap.css('marginTop', this.btnList.first().outerHeight(true) * this.btnList.length / -2);

      this.beforeFunction && this.beforeFunction();
      this.scrollFn($this);
      this.clickRoll($this);
    },
    // 处理浏览器滚动方向
    scrollFn: function($this) {
      var This = this,
        y = 0,
        _y = 0,
      touch = null;

        // pc端滚动
        // DOMMouseScroll 火狐浏览器滚动事件
        $(window).bind('onmousewheel mousewheel DOMMouseScroll', function(e) {
          // e.preventDefault();
          // 判断滚动的方向
          This.differ = e.originalEvent.detail ?
            (e.originalEvent.detail > 0 ? 1 : 0) :
            (e.originalEvent.wheelDelta > 0 ? 0 : 1);
          This.nIndex = $this.attr('data-index');
          if (This.differ) {
            if (++This.nIndex > This.maxIndex) {
              This.nIndex = This.maxIndex;
              return;
            }
          } else {
            if (--This.nIndex < 0) {
              This.nIndex = 0;
              return;
            }
          }
          This.nIndex = This.nIndex;
          if (!$this.is(':animated')) {
            This.whellRoll(This, $this, This.nIndex);
          }
        });

      // 移动端滚动
      $(document).bind('touchstart', function(e) {
          y = e.originalEvent.touches[0].pageY;
          This.nIndex = $this.attr('data-index');
        })
        .bind('touchmove', function(e) {
          e.preventDefault();
          _y = e.originalEvent.touches[0].pageY;

          // 判断滑动方向
          dire = y - _y > 0 ? 1 : 0;
          if (dire) {
            if (++This.nIndex > This.maxIndex) {
              This.nIndex = This.maxIndex;
              return;
            }
          } else {
            if (--This.nIndex < 0) {
              This.nIndex = 0;
              return;
            }
          }
          _y = _y;
          This.nIndex = This.nIndex;
          if (!$this.is(':animated')) {
            This.whellRoll(This, $this, This.nIndex);
          }
        });
    },
    // 按钮点击切换功能
    clickRoll: function($this) {
      var This = this;
      this.btnList.click(function() {
        This.nIndex = $(this).index();
        $(this).addClass('on').siblings().removeClass('on');
        if (!$this.is(':animated')) {
          This.whellRoll(This, $this, This.nIndex);
        }
      });
    },
    // 滚动功能
    whellRoll: function(This, obj, n) {
      // 滚动按钮添加class
      This.btnList.eq(n).addClass('on').siblings().removeClass('on');
      obj.animate({
          top: '-' + n + '00%'
        }, This.transition, function() {
          // 执行回调
          This.callback && This.callback(n, This.maxIndex);
        })
        // 将更新后的index重新赋值
        .attr('data-index', n);
    }
  }

  var init = {
    pageList: $('.ui-page'),
    transition: 1000
  }

  $.fn.fullPage = function(options) {
    var oPage = new Page(this, $.extend(init, options));
    oPage.init(this);
  }
}(jQuery));

调用方法

$('.ui-page-wrap').fullPage({
    beforeFunction: function() {
        $('.ui-page').eq(0).children().addClass('on');
    },
    callback: function(i) {
        $('.ui-page').eq(i).children().addClass('on').parent().siblings().children().removeClass('on');
    }
});

 

源码与案例展示

百度云下载
密码：wa21
DEMO展示