jquery.mousewheel实现整屏翻屏效果
实现整屏上下翻效果：
需加载的js
<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script> <scripttype="text/javascript"src="js/jquery.mousewheel.js"></script>
css样式如下：
body{padding:0;margin:0;overflow:hidden}
ul{list-style:none;}
.content{width:100%;height100%;position:relative;top:0;}
.div_01,.div_02,.div_03,.div_04{width:100%;margin:0auto;text-align:center;}
.div_01{background:#b20909;}
.div_02{background:#0941b2;}
.div_03{background:#2db209;}
.div_04{background:#b29c09;}
.left_fixed{position:fixed;width:15px;height:100px;left:100px;top:200px;z-index:999;}
.left_fixedulli{
background:#000;cursor:pointer;width:15px;height:15px;
border-radius:15px;margin-bottom:10px;
}
.left_fixedulli.active{background:#fff;}
jquery代码如下：
varpage=0;//翻屏变量，初始第一屏
varshakStaute=0;//该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象
$(function(){
varstarttime=0,
endtime=0;
$("body").mousewheel(function(event,delta){
starttime=newDate().getTime();//记录翻屏的初始时间
if(delta<0&&page>=0&&page<=$(".content.divsame").length-2){
if(shakStaute>=0&&(starttime==0||(endtime-starttime)<=-500)){//在500ms内执行一次翻屏
shakStaute=1;
page++;
renderPage(page,true);//翻屏函数
endtime=newDate().getTime();//记录翻屏的结束时间
}
}elseif(delta>0&&page>=1&&shakStaute==1&&(starttime==0||(endtime-starttime)<=-500)){
page--;
renderPage(page,true);
endtime=newDate().getTime();
}
});
vardiv_height=$(window).height();
$(".divsame").css({'height':div_height});
$(window).resize(function(){
div_height=$(window).height();
$(".divsame").css({'height':div_height});
$('.content').animate({top:-page*div_height},100);
});
$(".left_fixedulli").on("click",function(){//点击小导航也执行翻屏
varindex=$(this).index();
if(index>0){
shakStaute==1;
}
page=index;
renderPage(page,true);
$(".left_fixedulli").removeClass("active");
$(this).addClass("active");
returnfalse;
});
functionrenderPage(pageNumber,isScroll){
if(isScroll){
$('.content').animate({top:-pageNumber*div_height},'slow');
$(".left_fixedulli").removeClass("active");
$(".left_fixedulli").eq(pageNumber).addClass("active");
}
return;
}
})
同时也是实时响应的。
再来看一个例子
注意头部加载的js，jquery库，mousewheel.js已经实现的index.js
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script>
<scripttype="text/javascript"src="js/jquery.mousewheel.js"></script>
<scripttype="text/javascript"src="js/index.js"></script>
<style>
body{padding:0;margin:0;overflow:hidden}
ul{list-style:none;}
.div_01,.div_02,.div_03,.div_04{width:100%;margin:0auto;text-align:center;}
.div_01{background:#b20909;}
.div_02{background:#0941b2;}
.div_03{background:#2db209;}
.div_04{background:#b29c09;}
.left_fixed{position:fixed;width:15px;height:100px;left:100px;top:200px;z-index:999;}
.left_fixedulli{background:#000;cursor:pointer;width:15px;height:15px;border-radius:15px;margin-bottom:10px;}
.left_fixedulli.active{background:#fff;}
</style>
</head>
<body>
<divclass="content">
<divclass="div_01"></div>
<divclass="div_02"></div>
<divclass="div_03"></div>
<divclass="div_04"></div>
</div>
<divclass="left_fixed">
<ul>
<liclass="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
jquery代码如下(index.js)：
vari=0;//翻屏变量，初始第一屏
vars=0;//该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象
$(function(){
varstarttime=0,
endtime=0;
$("body").mousewheel(function(event,delta){
starttime=newDate().getTime();//记录翻屏的初始时间
if(delta<0&&i>=0&&i<=2){
if(s>=0&&(starttime==0||(endtime-starttime)<=-500)){//在500ms内执行一次翻屏
s=1;
i++;
renderPage(i,true);//翻屏函数
endtime=newDate().getTime();//记录翻屏的结束时间
}
}elseif(delta>0&&i>=1&&s==1&&(starttime==0||(endtime-starttime)<=-500)){
i--;
//console.log(i);
renderPage(i,true);
endtime=newDate().getTime();
}
});
vardiv_height=$(window).height();
$(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});
$(window).resize(function(){
vardiv_height=$(window).height();
$(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});
});
functionrenderPage(pageNumber,isScroll){
if(isScroll){
$('body,html').animate({scrollTop:pageNumber*div_height},'slow');
$(".left_fixedulli").removeClass("active");
$(".left_fixedulli").eq(pageNumber).addClass("active");
}
return;
}
$(".left_fixedulli").on("click",function(){//点击小导航也执行翻屏
varindex=$(this).index();
renderPage(index,true);
$(".left_fixedulli").removeClass("active");
$(this).addClass("active");
returnfalse;
});
})