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 相关文章推荐
jquery异步请求实例代码
Jun 21 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
vue路由的配置和页面切换详解
Sep 09 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正则提取图片地址
2014/03/27 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
JS delegate与live浅析
2013/12/21 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
Vue 组件间的样式冲突污染
2017/08/31 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Python的条件锁与事件共享详解
2019/09/12 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python类型转换的魔术方法详解
2020/12/23 Python
一份比较全的PHP面试题
2016/07/29 面试题
"引用"与多态的关系
2013/02/01 面试题
一些Solaris面试题
2015/12/22 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
会展中心部门工作职责
2013/11/27 职场文书
清扬洗发水广告词
2014/03/14 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
如何用python插入独创性声明
2021/03/31 Python
用Python提取PDF表格的方法
2021/04/11 Python
理解python中装饰器的作用
2021/07/21 Python