鼠标一滑整屏 html,jquery.mousewheel实现整屏翻屏效果

实现整屏上下翻效果：

需加载的js

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代码如下：

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

body{padding:0;margin:0; overflow:hidden }

ul{list-style:none;}

.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 代码如下(index.js)：

var i=0;//翻屏变量，初始第一屏

var s = 0; //该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象

$(function(){

var starttime = 0,

endtime = 0;

$("body").mousewheel(function(event, delta) {

starttime = new Date().getTime(); //记录翻屏的初始时间

if (delta < 0&& i>=0 && i<=2) {

if (s>=0&&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms内执行一次翻屏

s=1;

i++;

renderPage(i,true); //翻屏函数

endtime = new Date().getTime(); //记录翻屏的结束时间

}

} else if (delta > 0&& i>=1&&s==1&& (starttime == 0 || (endtime - starttime) <= -500)) {

i--;

//console.log(i);

renderPage(i,true);

endtime = new Date().getTime();

}

});

var div_height=$(window).height();

$(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});

$(window).resize(function(){

var div_height=$(window).height();

$(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});

});

function renderPage(pageNumber, isScroll){

if (isScroll){

$('body, html').animate({scrollTop:pageNumber*div_height }, 'slow');

$(".left_fixed ul li").removeClass("active");

$(".left_fixed ul li").eq(pageNumber).addClass("active");

}

return;

}

$(".left_fixed ul li").on("click", function(){ //点击小导航也执行翻屏

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

renderPage(index, true);

$(".left_fixed ul li").removeClass("active");

$(this).addClass("active");

return false;

});

})