全屏上下滚动的简单实现

      我这里的全屏上下滚动就是类似jquery中的fullpage插件效果,点击可以查看效果,但是我觉得插件什么的虽然好用,但是也有不方便的地方。每个人的自己手中的项目都很灵活,不可能完全一样,小米4手机的宣传页也用了这个效果,曾经也是这个插件直接引用的,但是后来,小米没有用这个插件了,因为他们自己有了更好的插件,而且,还能保留头部和底部,而其他的网站做这种页面 ,基本上都没有导航和底部,所以用别人的始终是拿来的,没有自己的东西好。

       今天的内容主要是自己写的一个和插件效果相同的东西,插件要引用jQuery.js,jquery.fullpage.min.js以及jquery-ui.min.js三个文件,而自己的这个东西只要jquery.js和鼠标滚轮绑定的一个jquery.mousewheel.min.js就可以了,鼠标滚轮的这个因为JS原生的会有兼容性问题,太麻烦,这里就没用原生的JS来做,偷个懒^_^

        首先说一下思路,决定做这个的时候,一开始的思路是:1、要得到当前页面的下标。2、判断鼠标滚轮式向上滑动还是向下滑动,如果向上滑动,下标减一,反之就是加一。3、向下滑动,当前页面高度从100%减到0,类似于display:none的效果,只有当前页面的高度为100%时,其他屏的内容高度均为0,则隐藏;同时当前页面的下一个页面高度从0增加到100%。然后还可以添加个侧边的导航的小点,绑定每个相应的div,这样也可以通过这些点来控制内容的滑动。

javascript代码如下:

    //滚动控制    

 function scrollCtrl(){    

 var  i,k,curStyle, isScroll=false, scrollObj=$(".full"), objLen=scrollObj.length; conBox=$("#wrap"),    

 prev=$(".prev"),    

 next=$(".next"),   

 ctrlLi=$(".ctro-ul li");   //获取当前页面下标   

   function getIndex(){    

       curStyle=".pcur";    

        i=$(curStyle).index();             //返回-1表示没选择人任何项      

 }    //显示提示信息    

 function tip(obj){    

         var tip=$(obj).find(".tips");    

         tip.fadeIn("slow");    

         setTimeout(function(){tip.fadeOut();},1000);      

   }     //绑定鼠标事件    

 conBox.bind("mousewheel",function(event,data){   

         if(isScroll ==false)    

        {            

          getIndex();          

           //data>0鼠标向上划   

           if(data>0){    

                   if(i==0){    

                            tip(prev);   

                      }    

                        else if(i>0){   

                               k=i;    i=i-1;    

                                scrollScreen(curStyle,i,k,'100%','-100%');    

                          }    

                       }    //data<0向下划    

                      else    {       

                              if(i

                                      k=i;i=i+1; 

                                      scrollScreen(curStyle,i,k,'0','100%');                        

                                    }else{

                                    tip(next);

                                     }

                          }

                  }

                 return false;

});

        ctrlLiclick(function(){

           getIndex();

          k=i;

          var idx = $(this).index();

         if(idx>i){

                 scrollScreen(curStyle,idx,k,'0','100%');

          } else if(idx

                 scrollScreen(curStyle,idx,k,'100%','-100%');

          }else{

                 return false;

            }

});

function scrollScreen(obj,i,k,heightStyle,topStyle){

        isScroll = true;

$(obj).addClass("z1").height("100%"),removeclass("pcurp-"+k+"-cur");

scrollObj.eq(i).css({top:topStlye,height:"100%"}).addClass("z2").stop(true,true).animate({top:0},{

easing:"swing",

duration:500,

complete:function(){

ctrlLi.eq(i).addClass("cur").siblings('li').removeClass("cur");

$(this).removeClass("z2").addClass("pcur p-"+i+"-cur");

//not()不匹配选择

scrollObj.not(curStyle).removeClass("z1").height(0);

isScroll = false;

}});

}

}

$(function() {

scrollCtrl(); //滚动控制

});

         HTML代码和CSS就懒得贴出来了,那个很简单,做这些东西觉得学到了一些jquery操作DOM的一些知识,用JS操作DOM是JS的重点内容。以后还是要在这一块领域多练习。打算一边学,一边多写写JS,才能熟能生巧,从菜鸟成长为大神                                       

                                                                                                                                                                                                  ——  一个不会写JS的前端

你可能感兴趣的:(全屏上下滚动的简单实现)