封装自己的jq myFullpage插件

• 首先了解fullPage的工作原理
  可以鼠标键盘监听事件和鼠标滚轮来控制屏幕滚动的那种效果
  
  类似于这样的布局方式，创建class类名box容器，然后在容器里面根据需求生成三个section页面，在根据需求在section页面里面生成silde横屏滚动，在创建一个WapperSilde容器将silde页面包裹起来插入在section当中

jq方式引入fullpage插件

• 重要参数，监测页数滚动完成和过程中
  • onLeave ：页面离开后触发，index显示当前页数
  • afterLoad ：离开后到达当前页面触发，index显示页数，两个参数，第二个参数是页数

  //示例
   $("#wapper").fullpage({
            afterLoad : function (a,index){
                console.log("后",index)
            },
            onLeave : function (index){
                console.log("先",index)
            }
        })
  1
  2
  3
  4
  5
  6
  7
  8
  9

  封装自己的myFullPgae

需要填写的参数和值，自定义

• 将自己要生成的classbox类名加工进方法里

pageEngine.init(".box",["red" ,"yellow", "green"])
 .addSection("oneSection1")//生成第一个section
 	//第一个页面的样式，这里就不复制粘贴了基本上每一个样式都是一样的
 	 .addComponent({
        className: "jiuyi",
        type: 'base', //根据该属性来生成不一样的效果
        width: 100,
        height: 100,
        text: "这里是九依的fullpage demo11",
        center: true,
        css: {
            position: "absolute",
            opacity: 0,
            top: 0,
            backgroundImage: "url(./src/images/6.jpg)",
            backgroundSize: "100% 100%",
            padding: "10px 15px 10px 15px",
            textAlign: "justify",
            fontSize: "18px",
            fontWeight: "900",
            lineHeight: "25px",
        },
        event : {
         click : function (){
         
         },
         mouseover : function(){
         
         }
        },
        //下两个控制入场离场动画
        animateIn: {
            opacity: 1,
            top: 240,
        },
        animateOut: {
            opacity: 0,
            top: 0,
        },
        delay:500 //延迟时间
    })
 .addSection("oneSection2")//生成第二个section
 	 .addSilde("2-1 silde")//生成第二个section的第一个silde
 	 .addSilde("2-2 silde")//生成第二个section的第二个silde
 	 .addSilde("2-3 silde")//生成第二个section的第三个silde
 .addSection("oneSection3")//生成第三个section
 //启动
 .load()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

封装pageEngine方法 - 容器生成

//开始生成，启动函数，初始化值
var pageEngine = {
		//准备工作
	init: function (selector, colorsArray) {
       this.$W = $(selector); //将传进来的值jq包装
       this.colorsArray = colorsArray; //第二个参数，颜色
       this.sildeFlag = false; //判断是section,还是silde
   	   return this; //链式调用的精髓，将当前方法返回回去,该对象全局都可以用
    },
    //生成section页面	 class自定义类名
     addSection: function (className) {
        this.sildeFlag = false; 	//这是生成类名             用户自定义类名
        this.$Pgae = $("
").addClass(className);
        this.$Pgae.appendTo(this.$W) //将该secition塞入进box容器里面
        return this; 
    },
    //生成silde页面
     addSilde: function (className) {
        this.sildeFlag = true;
        this.$silde = $("
").addClass(className);
        this.$silde.appendTo(this.$Pgae) //this指向pageEngine
        return this;
    },
    //将创建出来的页面设置用户传入的Css值，留接口
     addComponent: function (config) {
        var oCp = null;
        switch (config.type) { 	//根据type，来生成不一样的效果
            case "base": {
                oCp = ComponentFactory(config); //设置css值的方法
                break;
            }
        }
        //如果sildeFlag是ture，就把oCp加入在silde里面，如果是false就加入在section里
        this.sildeFlag ? this.$silde.append(oCp) : this.$Pgae.append(oCp);
        return this;
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

ComponentFactory方法

var ComponentFactory = function (config) {
   var $Div = $('
'); //生成展示类容
   //用户自定义属性
   config.className && $Div.addClass(config.className); 
   config.width && $Div.css("width", config.width);
   config.height && $Div.css("height", config.height);
   config.text && $Div.text(config.text);
   config.center && $Div.css({ position: "absolute", left: "50%", marginLeft: -config.width / 2 });
   config.css && $Div.css(config.css);
    //事件处理
    if (config.event) {
      for (var prop in config.event) {
          $Div.on(prop, config.event[prop]);
       }
    }
	//自定义事件，动画
   $Div.on("cpLeave", function () {
      var self = this; //当前展示效果盒子记录
      setTimeout(function () {
      		//用户自定义动画移出效果
         config.animateOut && $(self).animate(config.animateOut)
         //延迟时间
      }, config.delay);
   });
   $Div.on("cpLoad", function () {
      var self = this;
      setTimeout(function () {
      //用户自定义动画移入效果
         config.animateIn && $(self).animate(config.animateIn)
      }, config.delay);
   });
   return $Div; //这个时候oCp拿着这个闭包的，展示效果
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

接着上面的继续来

var pageEngine = {
		//准备工作
	init: function (selector, colorsArray) {
       this.$W = $(selector); //将传进来的值jq包装
       this.colorsArray = colorsArray; //第二个参数，颜色
       this.sildeFlag = false; //判断是section,还是silde
   	   return this; //链式调用的精髓，将当前方法返回回去,该对象全局都可以用
    },
    //生成section页面	 class自定义类名
     addSection: function (className) {
        this.sildeFlag = false; 	//这是生成类名             用户自定义类名
        this.$Pgae = $("
").addClass(className);
        this.$Pgae.appendTo(this.$W) //将该secition塞入进box容器里面
        return this; 
    },
    //生成silde页面
     addSilde: function (className) {
        this.sildeFlag = true;
        this.$silde = $("
").addClass(className);
        this.$silde.appendTo(this.$Pgae) //this指向pageEngine
        return this;
    },
    //将创建出来的页面设置用户传入的Css值，留接口
     addComponent: function (config) {
        var oCp = null;
        switch (config.type) { 	//根据type，来生成不一样的效果
            case "base": {
                oCp = ComponentFactory(config); //设置css值的方法
                break;
            }
        }
        //如果sildeFlag是ture，就把oCp加入在silde里面，如果是false就加入在section里
        this.sildeFlag ? this.$silde.append(oCp) : this.$Pgae.append(oCp);
        return this;
    },
     bindEvent: function () {
     
        this.$W.find(".section").on({
        //这是控制里面的动画，就是控制翻页之后的移入移出动画，是ComponentFactory方法里面的
            _leave: function () {
            //移出
                $(this).find(".component").trigger("cpLeave")
            },
            _load: function () {
            //移入
            //$(this).find(".component")就是oCp生成的那个容器，让他做出相应动画
                $(this).find(".component").trigger("cpLoad")
            }
        })
    },
    //启动函数
     load: function () {
     	//生成完所有容器启动该方法
        var self = this;
        this.bindEvent();
		//主角fullPage方法
        this.$W.myFullpage({
            colorsArray: this.colorsArray,
            onLeave: function (index) {
                self.$W.find(".section").eq(index).trigger("_leave");
            },
            afterLoad: function (index) {
                self.$W.find(".section").eq(index).trigger("_load");
            }
        });
        //初始话第一个section加入移出移入动画效果
    this.$W.find(".section").eq(0).trigger("_load");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

封装自己的myFullPage

• 首先先在jq工具方法里面加入自己的方法名称，config用于接收传递参数

$.fn.extend({
  	 myFullpage: function (config) {
  	 
  	 }
})
1
2
3
4
5

初始化值，准备工作

  $.fn.extend({
  	 myFullpage: function (config) {
  	  var colorArray = config.colorsArray; //页面颜色，用于开发
      var $W = $(this); //将传递的box，先用jq包裹起来后面用得到
      var $Section = $W.find(".section") //生成的section子页
      // 初始化值
      var chuShiHhua = { //整屏高度宽度初始化占满整屏
          width: "100%",
          height: "100%"
      }
      //获取当前窗口的高度宽度
      var clientWidth = window.innerWidth;
      var clientHeight = window.innerHeight;
      
      var curindex = 0; //后续参数，用于计数，页数，看向上向下移动的时候的参数
      var key = true;	// 防止用户键盘按的过快出现的bug
      var curindexLeft = 0; //记录水平方向页数
  	 }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

初始化CSS和生成容器

// 让因为要让Html整屏滚动，所以就在这里设置的外边距，溢出部分隐藏
  $("html")
          .css({
              margin: "0px",
              overflow: "hidden",
              position: "relative"
          })
          //集中操作
          .add("body")
          .add($W)
          .add($Section)
          .css(chuShiHhua)
      $W
          .css({
              position: "absolute",
              left: "0px",
              top: "0px"
          })
          //选中section对每一个页面添加颜色，方便开发
          .find($Section).each(function (index, ele) {
              $(ele) 
                  .css({ backgroundColor: colorArray[index], position: "relative" })
                  //如果下面有silde的话就让她的宽高等于整个屏幕宽度并且浮动
                  .find(".silde")
                  .css({ width: clientWidth, height: clientHeight, float: "left", position: "relative" })
                  //再给silde创建一个className为WapperSIlde的父容器
                  .wrapAll("
")
          })
          //对WapperSilde进行样式操作
            $Section.find(".WapperSilde")
          .css({ position: "absolute", left: "0px", top: "0px" })
          .each(function (index, ele) {
              $(ele)
                  .css({
                      width: $(ele)
                          .find(".silde")
                          //整体宽度的关于他的儿子容器 * 屏幕宽度
                          .size() * innerWidth, height: innerHeight
                  })
          })

  //运动，页面运动＋active激活状态
   $Section.eq(0)
   		//给第一个section一个active类名
          .addClass("active")
          //回退操作
          .end()
          .find(".WapperSilde")
          //给每一个WapperSilde下面的silde添加一个inneractive类名
          .each(function (index, ele) {
              $(ele).
                  find(".silde")
                  .eq(0)
                  .addClass("inneractive")
          })
     // 鼠标滚轮判断事件
     //		全局鼠标判断								防抖
//我这里直接将防抖放进来，以供参考
function debounce(handler, delay) {
  var timer = null;
  return function () {
      var _self = this, _arg = arguments;
      //先清除上一个定时器
      clearTimeout(timer);
      timer = setTimeout(function () {
      	//当前handler的this指向为document
          handler.apply(_self, _arg);
          //延迟时间
      }, 500)
  }
}

      $(document).on("mousewheel DOMMouseScroll", debounce(function (event) {
      //获取当前整屏高度
          var newtop = $W.offset().top;
          //局部变量，检测鼠标向上滚动或者向下滚动，预留接口，保留向上向下移动的值
  	    var dicrction = "";
          var dicrction = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));
          								//向上移动越界判断
          if(dicrction == 1 && curindex != 0){
          /向上移动
              dicrction = "top";
              //当前的位置，向上
              config.onLeave(curindex, dicrction)
              curindex--;
              //让newtop加等于clientHeight高的位置
              newtop += clientHeight;
              
              //向下移动
          }else if(dicrction == -1 && curindex != $Section.size() - 1){
              dicrction = "bottom";
              config.onLeave(curindex, dicrction)
              curindex++;
              newtop -= clientHeight;
          }
          //动画效果
          //全局匀速运动，
          $W.animate({ top: newtop }, 500, "swing", function () {
          	//锁，防止在运动之后有其他操作出现的bug
              key = true;
              //给section当前的页数加上acrive激活效果
              $Section.eq(curindex).addClass("active");
              	//dirction的作用来了，如果是向上，让之前的那个acrive消除
              if (dicrction == "top") {
              				//如果是向上，那就当前位置的上一个，就是+1的索引位置去掉active
                  $Section.eq(curindex + 1).removeClass("active");
              } else {
           //如果是向下，那就当前位置的上一个，就是-1的索引位去掉active
                  $Section.eq(curindex - 1).removeClass("active")
              }
              //移动之后触发的当前页面的索引位和方向
              config.afterLoad(curindex, dicrction)
          })
      
      }, 1500));

// 键盘事件
      $(document).on("keydown", function (e) {
          //判断垂直方向，和鼠标滚动事件一模一样
     	     if (e.which == 38 || e.which == 40) {
              if (key) {
                  key = false;
                  var newtop = $W.offset().top;
                  var dicrction = "";
                  if (e.which == 38 && curindex != 0) {
                      dicrction = "top";
                      config.onLeave(curindex, dicrction)
                      curindex--;
                      newtop += clientHeight;

                  } else if (e.which == 40 && curindex != $Section.size() - 1) {
                      dicrction = "bottom";
                      config.onLeave(curindex, dicrction)
                      curindex++;
                      newtop -= clientHeight;
                  }
                  $W.animate({ top: newtop }, 500, "swing", function () {
                      key = true;
                      $Section.eq(curindex).addClass("active");
                      if (dicrction == "top") {
                          $Section.eq(curindex + 1).removeClass("active");
                      } else {
                          $Section.eq(curindex - 1).removeClass("active")
                      }
                      config.afterLoad(curindex, dicrction)
                  })
              }
          }
  //判断水平方向的键盘事件
  		//越界兼容，如果左右方向没有页面的话，则是没办法使用该事件的，如果有自动生成的WapperSilde的类名则可以使用该方法
          if ($($Section[curindex]).find(".WapperSilde").hasClass("WapperSilde")) {
          // 判断左右方向的键
              if (e.which == 37 || e.which == 39) {
                  if (key) {
                      key = false;
                 		// $S用于记住WapperSilde值，方便后续使用
                      var $S = $(".active").find(".WapperSilde");
                      //记录WapperSilde下面的容器方便后续使用
                      var curShowDom = $S.find(".inneractive");
                      //获取当前WapperSilde的定位左边距离
                      var newleft = $S.offset().left;
                      var dicrction = null;
                      //左键盘事件判定
                      					//防止越界，curShowDom.index() 等于0的时候就不能再按左键盘触发事件了
                      if (e.which == 37 && curShowDom.index() != 0) {
                          newleft += clientWidth;
                          dicrction = "left";
                          //参数（计数索引，哪方向移动的）
                          config.onLeave(curindexLeft, dicrction);
                          curindexLeft--;
                          //防止越界，curShowDom.index() 等于0的时候就不能再按右键盘触发事件
                      } else if (e.which == 39 && curShowDom.index() != $S.find('.silde').size() - 1) {
                          newleft -= clientWidth;
                          dicrction = "right";
                            //参数（计数索引，哪方向移动的）
                          config.onLeave(curindexLeft, dicrction);
                          curindexLeft++;
                      }

  					//动画和加inneractive激活方法
                      $S.animate({ left: newleft }, 500, "swing", function () {
                          key = true;
                          // dicrction 如果移动了，就必定会等于left或者right,如果dicrtion等于null就返回""说明没有进入事件，如果能与null，就清除掉curShowDom的所有inneractive
                          dicrction != null ? curShowDom.removeClass('inneractive') : " ";
                          //如果dicrction等于left就是按的左按钮
                          if (dicrction == "left") {
                          //他的左边的，就是上一个兄弟添加inneractive
                              curShowDom.prev().addClass("inneractive")
                              //如果是右按钮
                          } else if (dicrction == "right") {
                          //他的右边的，下一个兄弟添加inneractive
                              curShowDom.next().addClass("inneractive")
                          }
                          //动画完成后，执行的回调函数，参数（当前索引位，方向）
                          config.afterLoad(curShowDom.index(), dicrction)
                      })
                  }
              }
          }
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

总结

是看的老师的课程边写边练的，基本上大体的运行原理都理解了，不过要自己什么都不翻阅手写一个fullpage还是蛮困难的，在老师原有的基础上，添加了防抖，添加了鼠标滚轮事件，对键盘左右按键的报错进行了兼容，对左右翻页的索引位进行了 调整
目前未解决的bug,左右翻页的时候会出现oCp的运动动画多次调用，导致容器已经显示了还要再执行一遍 animateOut和animateIn，有大佬知道怎么解决吗，不过上下页目前测试还是没什么Bug的