我这里的全屏上下滚动就是类似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<objLen-1){
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<i){
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的前端
网友评论