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; }); })