js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)


Posted in Javascript onJanuary 27, 2016

本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>wheel</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <script type="text/javascript" >
   var currentShowPageIndex = 0;
   var animateTimeout = null;
   var isWheelAnimating = false;
   var isWheelUp = function(event) {
    event = event || window.event;
    var up = true;
    if(event.wheelDelta){//IE/Opera/Chrome
     up = event.wheelDelta / 120 == 1 ? true : false;
    }else{//Firefox
     up = event.detail / 3 == 1 ? true : false;
    }
    return up;
   }
   var changeBar = function(prevIndex, index) {
    var barUl = document.getElementById('barUl');
    var barLiList = barUl.getElementsByTagName('li');
    barLiList[prevIndex].className = "";
    barLiList[index].className = "active"; 
   }
   var changePage = function(pageIndex) {
    var showPageUl = document.getElementById('wheelUl');
    changeBar(currentShowPageIndex, pageIndex);
    currentShowPageIndex = pageIndex;
    var left = -(currentShowPageIndex) * 1000;
    showPageUl.style.marginLeft = left + "px";
    return;
   }
   var animate = function(obj, mode, from, to){
    if(animateTimeout) {
     clearTimeout(animateTimeout);
    }
    if(mode == "left") {
     if(from > to) {
      from = from - 50;
      obj.style.marginLeft = (from) + "px";
      setTimeout(function(){
       animate(obj, mode, from, to);
      }, 30);
     } else {
        isWheelAnimating = false;
       }
     return;
    } 
    if(from < to) {
     from = from + 50;
     obj.style.marginLeft = (from) + "px";
     setTimeout(function(){
      animate(obj, mode, from, to);
     }, 30);
    } else {
       isWheelAnimating = false;
      }
   }
   var mouseWheel = function(event) { 
    if(isWheelAnimating) {
      return;
    }
    isWheelAnimating = true;
    var wheelUp = isWheelUp(event);
    var showPageUl = document.getElementById('wheelUl');
    var showPageUlWidth = parseInt(showPageUl.offsetWidth);
    var showPageLiList = showPageUl.getElementsByTagName('li');
    var showPageLiListLength = showPageLiList.length;
    var wheelWrapperLeft = parseInt(document.getElementById('wheelWrapper').offsetLeft);
    if(wheelUp && currentShowPageIndex < showPageLiListLength - 1) {
     changeBar(currentShowPageIndex, currentShowPageIndex + 1);
     currentShowPageIndex ++;
     var left = -(currentShowPageIndex) * 1000;
     //animate(showPageUl, "right", -(currentShowPageIndex - 1) * 1000, -(currentShowPageIndex - 1) * 1000);
     var from = -(currentShowPageIndex - 1) * 1000;
     var to = -(currentShowPageIndex) * 1000;
     animate(showPageUl, "left", from, to);
     return;
    }
    if(!wheelUp && currentShowPageIndex > 0) {
     changeBar(currentShowPageIndex, currentShowPageIndex - 1);
     currentShowPageIndex --;
     var from = -(currentShowPageIndex + 1) * 1000;
     var to = -(currentShowPageIndex) * 1000;
     animate(showPageUl, "right", from, to);
     return;
    } 
    isWheelAnimating = false;
   };
   if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',function(event) { mouseWheel(event); },false);
   }
   document.onmousewheel = function(event) { mouseWheel(event); }
   window.onload = function(){
    var barUl = document.getElementById('barUl');
    var barLiList = barUl.getElementsByTagName('li');
    for(var i=0,length=barLiList.length; i<length; i++) {
     (function(index){
      barLiList[index].onclick = function(){
       changePage(index);
      };
     })(i);
    }
   }
  </script>
  <style type="text/css" >
   body { background:#494949; margin:0; }
   ul { list-style:none; margin:0; padding:0; }
   li { float:left;}
   #wheelWrapper {
    width:1000px; height:550px; margin:0 auto; 
    position:fixed; left:50%; margin-left:-505px;
    bottom:50px; overflow:hidden;
   }
   #wheelUl {
    width:5050px; height:500px;
   }
   #barUl {
    clear:both; margin:0 auto; width:550px;
    margin-top:20px; line-height:25px;
   }
   #barUl>li {
    width:100px; background:orange;
    height:25px; margin-right:10px;
    border-radius:5px; text-align:center;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
   }
   #barUl>li:hover {
    background:#C36C12;
   }
   #barUl>li[class=active] {
    background:#C36C12;
   }
   #wheelUl>li { width:1000px; }
   .wheel {
    width:994px; height:500px; background:#FAAA3C;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    margin:0 auto;
    line-height:300px;
    font-size:100px;
    text-align:center;
   }
   .radius {
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
   }
   h1 { text-align:center; color:#fff; }
  </style>
 </head>
 <body id="body">
  <h1 >ie8+,chrome,ff提供支持</h1>
  <div id="wrapper">
   <div id="wheelWrapper">
    <ul id="wheelUl" >
     <li >
      <div class="wheel">
       1_page1
      </div>
     </li>
     <li >
      <div class="wheel">
       2_page2
      </div>
     </li>
     <li >
      <div class="wheel">
       3_page3
      </div>
     </li>
     <li >
      <div class="wheel">
       4_page4
      </div>
     </li>
     <li >
      <div class="wheel">
       5_page5
      </div>
     </li>
    </ul>
    <ul id="barUl">
     <li class="active">
      1
     </li>
     <li>
      2
     </li>
     <li>
      3
     </li>
     <li>
      4
     </li>
     <li>
      5
     </li>
    </ul>
   </div>
  </div>
 </body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
浅析JS运动
Dec 28 Javascript
javascript事件模型介绍
May 31 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
javascript中的面向对象
Mar 30 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
AngularJS转换响应内容
Jan 27 #Javascript
jQuery+css实现的切换图片功能代码
Jan 27 #Javascript
javascript中的3种继承实现方法
Jan 27 #Javascript
jQuery+css实现的换页标签栏效果
Jan 27 #Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 #Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 #Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
永不消失的title提示代码
2007/02/15 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Python处理文本换行符实例代码
2018/02/03 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
python爬虫基础知识点整理
2020/06/02 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
社会保险接收函
2014/01/12 职场文书
销售团队获奖感言
2014/08/14 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
限期整改通知书
2015/04/22 职场文书
创业计划书之溜冰场
2019/10/25 职场文书