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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
jquery实现聊天机器人
Feb 08 jQuery
浅谈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实现对象克隆的方法
2015/06/20 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Python中title()方法的使用简介
2015/05/20 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python cumsum函数的具体使用
2019/07/29 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python的flask框架难学吗
2020/07/31 Python
python创建文本文件的简单方法
2020/08/30 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
给同学的道歉信
2014/01/16 职场文书
上课睡觉检讨书
2014/01/28 职场文书
公司捐款倡议书
2014/05/14 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
Python Numpy之linspace用法说明
2021/04/17 Python