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实现仿腾讯微博发表广播
Nov 17 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python实现简单的语音识别系统
2017/12/13 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python中函数参数调用方式分析
2018/08/09 Python
Django中使用Celery的方法示例
2018/11/29 Python
python3安装speech语音模块的方法
2018/12/24 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
自我推荐信范文
2014/05/09 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
医生辞职信范文
2015/03/02 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Oracle 多表查询基本语法实例
2022/04/18 Oracle