依赖jQuery库封装全屏滚动插件,兼容移动端

轩陌

分类: 实战案例 3773 5

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展示

    • 46人 Love
    • 1人 Haha
    • 1人 Wow
    • 0人 Sad
    • 0人 Angry
    jQuery插件、全屏滚动

    作者简介:轩陌

    打赏

    生命的意义在于折腾。

    共 5 条评论关于 “依赖jQuery库封装全屏滚动插件,兼容移动端”

    Loading...