实现整屏上下翻效果： 需加载的js
rush:js;">
css样式如下：
rush: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:0 auto; 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_fixed ul li{
background:#000;cursor:pointer;width:15px;height: 15px;
border-radius:15px;margin-bottom: 10px;
}
.left_fixed ul li.active{background:#fff;}
jquery代码如下：
rush:js;">
var page=0;//翻屏变量，初始第一屏
var shakStaute = 0; //该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象
$(function(){
var starttime = 0,endtime = 0;
$("body").mousewheel(function(event,delta) {
starttime = new Date().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 = new Date().getTime(); //记录翻屏的结束时间
}
} else if (delta>0 && page>=1 && shakStaute==1 && (starttime == 0 || (endtime - starttime) <= -500)) {
page--;
renderPage(page,true);
endtime = new Date().getTime();
}
});
var div_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_fixed ul li").on("click",function(){ //点击小导航也执行翻屏
var index = $(this).index();
if(index>0){
shakStaute==1;
}
page = index;
renderPage(page,true);
$(".left_fixed ul li").removeClass("active");
$(this).addClass("active");
return false;
});
function renderPage(pageNumber,isScroll){
if (isScroll){
$('.content').animate({top:-pageNumber*div_height },'slow');
$(".left_fixed ul li").removeClass("active");
$(".left_fixed ul li").eq(pageNumber).addClass("active");
}
return;
}
})
同时也是实时响应的。
再来看一个例子
注意头部加载的js，jquery库，mousewheel.js已经实现的index.js