jquery.mousewheel实现整屏翻屏效果
更新时间：2015年08月30日 17:11:36 投稿：hebedich
jQuery Mousewheel 用于添加跨浏览器的鼠标滚轮支持。
mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。
实现整屏上下翻效果：
需加载的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;
});
})
相关文章
本文详细讲解了JQuery操作与遍历元素并设置其属性、样式和内容的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
本文给大家分享基于jquery实现的一款图片特效，当点击小图片时会淡入淡出大图片，通过定义需要展示的图片以及图片要展示的时间，来实现这一效果，感兴趣的朋友跟着小编一起来学习吧2015-09-09
jQuery Validation Plugin验证插件手动验证
jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持，接下来通过本文给大家介绍jQuery Validation Plugin验证插件手动验证2016-01-01
这篇文章主要介绍了jQuery焦点控制图层展示延迟隐藏的方法,实例分析了jQuery操作图层的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
鼠标拖动图片的效果想必大家都有见到过吧，其实实现起来很简单的，下面使用query来实现下，感兴趣的朋友不要错过2014-01-01
这篇jquery入门的文章，确实不错，前提是大家已经对js稍微熟悉一点即可能看懂，非常不错的jquery入门篇文章。2009-12-12
刚看到个问题，如何得知同时按下了哪几个键以及按键顺序（难道是格斗游戏的组合键？），其实jQuery实现起来是很简单的。2010-03-03
本篇文章主要介绍了jQuery中的deferred对象和extend方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
这篇文章主要介绍了基于jQuery的项目常见函数封装集合,总结分析 jQuery常见功能的函数封装,便于在项目开发中直接使用,需要的朋友可以参考下2016-06-06
在一些网站我们经常看到当我们要输入邮箱的时候，还没有填写完，就会出现一系列下拉列表，帮助我们自动补全邮箱，怎么实现的呢？今天下面给大家分享基于jquery实现邮箱下拉列表自动补全功能，一起看看吧2016-09-09
最新评论