jquery.mousewheel实现整屏翻屏效果


Posted in Javascript onAugust 30, 2015

实现整屏上下翻效果:
需加载的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;
  });
})
Javascript 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
AngularJS中的promise用法分析
May 19 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 #Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 #Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 #Javascript
javascript中sort() 方法使用详解
Aug 30 #Javascript
javascript中的正则表达式使用详解
Aug 30 #Javascript
jQuery鼠标事件汇总
Aug 30 #Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 #Javascript
You might like
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP重定向的3种方式
2013/03/07 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
解决Django中多条件查询的问题
2019/07/18 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
2015年党支部书记工作总结
2015/05/21 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书