jquery.mousewheel实现整屏翻屏效果

实现整屏上下翻效果：
需加载的js

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="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: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

<！doctype html><html><head><meta charset="utf-8"><title></title><meta name="keywords" content=""/><meta name="description" content=""/><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script><script type="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: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;}</style></head><body><div class="content"><div class="div_01"></div><div class="div_02"></div><div class="div_03"></div><div class="div_04"></div></div><div class="left_fixed"><ul><li class="active"></li><li></li><li></li><li></li></ul></div></body></html>

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