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 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
JavaScript手风琴页面制作
May 17 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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中一些可能会被忽略的问题
2013/06/21 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Pycharm设置界面全黑的方法
2018/05/23 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
初三开学计划书
2014/04/27 职场文书
文秘应届生求职信
2014/07/05 职场文书
教师求职信怎么写
2015/03/20 职场文书
社区宣传标语口号
2015/12/26 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python