jquery.mousewheel實現(xiàn)整屏翻屏效果
更新時間：2015年08月30日 17:11:36 投稿：hebedich
jQuery Mousewheel 用于添加跨瀏覽器的鼠標(biāo)滾輪支持。
mousewheel事件的處理函數(shù)有一點小小的變化，它除了第一個參數(shù)event 外，還接收到第二個參數(shù)delta。通過參數(shù)delta可以獲取鼠標(biāo)滾輪的方向和速度。
實現(xiàn)整屏上下翻效果：
需加載的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; //該變量作用是鼠標(biāo)滑輪一直向下或者向上滑動時出現(xiàn)抖動現(xiàn)象
$(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內(nèi)執(zhí)行一次翻屏
shakStaute=1;
page++;
renderPage(page,true); //翻屏函數(shù)
endtime = new Date().getTime(); //記錄翻屏的結(jié)束時間
}
} 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(){ //點擊小導(dǎo)航也執(zhí)行翻屏
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;
}
})
同時也是實時響應(yīng)的。
再來看一個例子
注意頭部加載的js，jquery庫，mousewheel.js已經(jīng)實現(xiàn)的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; //該變量作用是鼠標(biāo)滑輪一直向下或者向上滑動時出現(xiàn)抖動現(xiàn)象
$(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內(nèi)執(zhí)行一次翻屏
s=1;
i++;
renderPage(i,true); //翻屏函數(shù)
endtime = new Date().getTime(); //記錄翻屏的結(jié)束時間
}
} 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(){ //點擊小導(dǎo)航也執(zhí)行翻屏
var index = $(this).index();
renderPage(index, true);
$(".left_fixed ul li").removeClass("active");
$(this).addClass("active");
return false;
});
})
相關(guān)文章
JQuery WEUI Select 組件增加搜索欄示例demo
這篇文章主要介紹了JQuery WEUI Select 組件增加搜索欄示例demo,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
DIY jquery plugin - tabs標(biāo)簽切換實現(xiàn)代碼
接觸jquery 2,3個月了，一直都未動手寫過插件。正好最近比較閑，就打算把一直看不順眼的項目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個控件，copy,past的代碼太多）。2010-12-12
在使用slideToggle 的時候經(jīng)常會遇到列表收起時候閃爍的問題,一般IE瀏覽器會有這個問題，其他瀏覽器比如火狐不會出現(xiàn)閃爍.2011-07-07
formvalidator驗證插件中有關(guān)ajax驗證問題
jquery formvalidator插件是不錯的國產(chǎn)驗證插件了，做點普通的校驗也是很方便的，但最近遇到個問題，發(fā)現(xiàn)如果表單整個表單是AJAX提交時，就不能按傳統(tǒng)的做法了2013-01-01
本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
運用JQuery的toggle實現(xiàn)網(wǎng)頁加載完成自動彈窗
toggle()事件 它主要切換元素的可見狀態(tài)，下面為大家介紹下運用JQuery的toggle實現(xiàn)網(wǎng)頁加載完成自動彈窗2014-03-03
jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實例詳解
這篇文章主要介紹了jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法,結(jié)合實例形式詳細(xì)分析了綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind的具體使用技巧與相關(guān)注意事項,需要的朋友可以參考下2016-01-01
利用jQuery 實現(xiàn)GridView異步排序、分頁的代碼
經(jīng)常會用到j(luò)query.ui.tabs標(biāo)簽，如我們可以把備份管理放在一個頁面上，而該頁面有兩個tab分別為備份和還原，但這樣會現(xiàn)在這個頁面臃腫2010-02-02
很多時候我們需要按時間間隔執(zhí)行一個任務(wù),當(dāng)滿足一定條件時停止執(zhí)行.此插件旨在解決這一經(jīng)常遇到的問題2013-12-12
這篇文章主要介紹了jQuery前端分頁示例分享的相關(guān)資料,需要的朋友可以參考下2015-02-02