总结--原生js实现整屏滚动及其交互效果

新手一枚，发现最近蛮流行鼠标整屏幕滚动作为基础的交互效果。

还不会用框架- -尝试着用JS+CSS写了

希望大家多多指点

需求：

当用户每滑动一次鼠标时，屏幕相应的向上/下/左/右 移动一个屏幕大小

以及每一屏都会有相应的动画

表达能力不好 希望大家能看得懂我在说啥- -

思路:

当用户还没有浏览到某一屏时，该屏幕不会出现动画效果。

当滑动到该屏时，可以通过增加/删除类来实现。

实现：

1.引入jquery.mousewheel.js文件

2.JS代码

var num = 0;

/*$(document)对整个网页文档进行操作 

monsewheel是鼠标滚动方法

mousewheel(event n){} n代表滚动方向 向上为1 向下为-1*/

$(document).mousewheel(function(event,n){
                    num=num-n;
                    
                    if(num<0){
                        num=0;      //页面在第一页时不可再向上滑

                    }
                    if(num>4){
                        num=4;  //页面在最后一页时不可再向下滑
                    }
                    //屏幕整屏滚动  section元素相对自身移动
                    $('section').stop().animate({'top':-100*num+'%'},400);
                    /*顶部菜单交互事件*/

   /*.eq()为选择器 选择指定位置的元素 类似于CSS中的nth-of-type()*/

  /*siblings()对除了自身外的同级元素的操作*/
                    $('#menu li').eq(num).siblings().removeClass('current');
                    $('#menu li').eq(num).addClass('current');
                    /*右边菜单颜色变化*/
                    $('#rightmenu li').eq(num).siblings().removeClass('olcurrent');
                    $('#rightmenu li').eq(num).addClass('olcurrent');
                    /*section的子级div发生变化*/
                    $('section>div').eq(num).removeClass('no');
                    $('section>div').eq(num).siblings().addClass('no');
                    $('section>div').eq(num).addClass('ani');
                    });
                    //右边菜单交互事件
                    $('#rightmenu li').click(function(event) {
                        $(this).addClass('olcurrent');
                        $(this).siblings().removeClass('olcurrent');
                        $(this).addClass('current');
                        $(this).siblings().removeClass('current');
                        
                        var index=$(this).index();
                        $('section>div').eq(index).removeClass('no');
                        $('section>div').eq(index).siblings().addClass('no');
                        $('section>div').eq(index).addClass('ani');
                        $('#menu li').eq(index).addClass('current');
                        $('#menu li').eq(index).removeClass('current');
                        //num=index;
                         $('section').animate({'top':-100*index+'%'},100);
                     
                    });