<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<link href="reset.css" rel="stylesheet" type="text/css" />

<style type="text/css">

#d1{ width:100%; height:850px; background:#069;overflow:hidden;}

#d2{ width:100%; height:850px; background:#933;overflow:hidden;}

#d3{ width:100%; height:850px; background:#060;overflow:hidden;}

#d4{ position:fixed; top:50%; right:0;}

#d4 a{ display:block; width:100px; height:100px;}

#d4 .hover{ background:#063;}

.duoyu{ width:100%; height:500px;}

</style>

<body>

<div id="d4">

    <ul>

        <li class="hover"><a href="javascript:void(0);">1</a></li>

        <li><a href="javascript:void(0);">2</a></li>

        <li><a href="javascript:void(0);">3</a></li>

    </ul>

</div>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

<div class="duoyu"></div><!--底部要加留底，否则在滚到最后一个已经到底了的时候位置永远到不了设置的滚动高度，就会一直执行死循环-->

<script src="jquery-1.9.0.min.js"></script>

<script type="text/javascript">

$(function(){

    var num=0,timer,num_max=2,dheight=850,//num_max是滚动个数减1;dheight是每个滚动元素的高度；

        nid=$("#d4 li"),

        d3=document.getElementById("d3"),

        d2=document.getElementById("d2"),

        d1=document.getElementById("d1");

        function getScrollTop(e){

            var scrollTop=0;

            if(document.documentElement&&document.documentElement.scrollTop){

                return document.documentElement.scrollTop;

                }

            else if(document.body.scrollTop){

                return document.body.scrollTop;

                }

            else{return scrollTop}//滚到最上方的是就是自己设置的scrollTop变量

            }

        function setScrollTop(x){

            if(document.documentElement&&document.documentElement.scrollTop){

                document.documentElement.scrollTop=x;

                }

            else if(document.body.scrollTop){

                document.body.scrollTop=x;

                }

            else{window.scrollTo(0,x)}//滚到最上方时时没有上面2个属性的只有window.scrollTo(0,x)

            }

        function throttle(method,context){//函数节流，method是要执行的函数，context是作用域函数

                clearTimeout(method.tId);//先清除之前设置的定时器，定时器ID存储在函数的tId属性中

                method.tId=setTimeout(function(){method.call(context)},100)//使用call（）来确保方法在适当的环境运行，如果没第2个参数就在全局执行

            }

        function gun(e){

            e=e||window.event;

            var top=getScrollTop();

            num=Math.ceil((top+10)/dheight)-1;

            //留空10个像素防止零界点和滚动事件冲突；

            nid.eq(num).addClass("hover").siblings().removeClass();

            console.log(num);

            }

        window.onscroll=function(e){

            throttle(gun);

            };

            nid.click(function(){//我很懒~！这里和下面的class切换用了JQ,不用也可以的

                $(this).addClass("hover").siblings().removeClass();

                num=nid.index($("#d4 li.hover"));

                //console.log(num);

                //(document.documentElement.scrollTop!=null)?scrollTOPl=document.documentElement.scrollTop:scrollTOPl=document.body.scrollTop;

            settimer(num*dheight);

                })

            //$("a").index($("a.hover"))

            function settimer(num){

                clearInterval(timer);

                timer=setInterval(function(){

                    var newss=getScrollTop();

                    var speed=(num-newss)/8;

                    speed=speed>0?Math.ceil(speed):Math.floor(speed);//如果newss等于0，（num-newss）/8那么speed也一直等于0，因为去整数了

                    if(newss==num){clearInterval(timer);

                    console.log(speed);

                        if(document.addEventListener){//重新添加事件监听

                            document.addEventListener('DOMMouseScroll',scrollFunc,false);

                        }//W3C

                        window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

                        }

                    else{

                        console.log(speed);

                        //if(speed==0){speed=num*dheight/8};

                        setScrollTop(newss+speed);

                        }

                    },30)};

            function scrollFunc(e){

                 e=e || window.event;

                     if(e.preventDefault) {

                    // Firefox

                      e.preventDefault();

                    } else{

                      // IE

                     window.event.returnValue = false;

                  }

                if(document.removeEventListener){//去除事件监听，让程序不能连续执行，要先执行完再添加事件监听

                    document.removeEventListener('DOMMouseScroll',scrollFunc,false);

                }//W3C

                window.onmousewheel=document.onmousewheel=function(){return false};//使他等于NULL居然无效，不知道什么原因

                     if(e.wheelDelta){//IE/Opera/Chrome

                         if(e.wheelDelta<0){

                             //alert("向下")

                             if(num<num_max){

                             num++;

                             nid.eq(num).addClass("hover").siblings().removeClass();}

                             settimer(num*dheight);//要放到外面要不没有绑定到滚轮的事件监听

                             }

                         else{

                             //alert("向上")

                             if(num>0){

                             num--;

                             nid.eq(num).addClass("hover").siblings().removeClass();}

                             settimer(num*dheight);

                             }

                     }else if(e.detail){//Firefox

                         if(e.detail>0){

                             //alert("向下")

                              if(num<num_max){

                             num++;

                             nid.eq(num).addClass("hover").siblings().removeClass();}

                             settimer(num*dheight);

                             }

                             else{

                            //alert("向上")

                             if(num>0){

                             num--;

                             nid.eq(num).addClass("hover").siblings().removeClass();}

                             settimer(num*dheight);

                             }

                     }

                }

        /*注册鼠标滚轮事件*/

        if(document.addEventListener){

            document.addEventListener('DOMMouseScroll',scrollFunc,false);

        }//W3C

        window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

        })

</script>

</body>

</html>

js整频滚动展示效果（函数节流鼠标滚轮事件）的更多相关文章

  1. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  2. js鼠标滚轮事件兼容

    JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...

  3. JS鼠标滚轮事件解析

    一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...

  4. JS鼠标滚轮事件详解

    鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...

  5. js中的鼠标滚轮事件

    ## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

  6. JS在项目中用到的AOP, 以及函数节流， 防抖, 事件总线

    1. 项目中在绑定事件的时候总想在触发前,或者触发后做一些统一的判断或逻辑,在c#后端代码里,可以用Attribute, filter等标签特性实现AOP的效果,可是js中没有这种用法,归根到本质还是 ...

  7. js文本公告滚动展示，图片轮播....

    1.引入文件 <link rel="stylesheet" href="/css/liMarquee.css"> <script src=&q ...

  8. js实现侧边栏信息展示效果

    目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...

  9. JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）

    onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) ...

随机推荐

  1. 使用 Git 报错 error: src refspec master matches more than one.

    今天在使用 Git push 代码时遇到一个报错: error: src refspec master matches more than one. error: failed to push som ...

  2. mmmmmmmm

    // // AView.m // AutoLayout // // Created by ZhuYi on 16/5/24. // Copyright © 2016年 ZY. All rights r ...

  3. jetbrain phpstorm 增加或删除一个 live template

    打开\.PhpStorm2016.2\config\templates 将xml文件放入该文件夹中 重启! 单独: setting -> editor -> Live Template +

  4. 如果有两个list<Object>只取出两个中不重复的（还可以优化，这里计数器没做好，暂时使用第三变量）

    import java.util.*; class test2{ public static void main(String[] args){ List<Integer> objList ...

  5. bigdata之hadoop and spark

    目前正在学习Hadoop和spark之类的东西,一个月把Hadoop的基础东西过了一遍,但是感觉好动都没跟上老师的课程,哪位前辈了解这方面的东西希望给指点迷津.接下来我们还要学习spark和nosql ...

  6. removeObjectAtIndex

    CGFloat lableW = (baseViewWidth - 2)/3;// dcj20150724,减2是为了解决字体模糊的问题,因为设置了边框. 原因是下面引起的 titleview.lay ...

  7. NSRange：NSMakeRange

    NSRange:NSMakeRange(6, cardNo.length - 10) [cardNo stringByReplacingCharactersInRange:NSMakeRange(6, ...

  8. intellig idea 快捷键

    可以在设置中更改为 eclipse 风格的快捷键. 默认 按住 ctlr + 左键,会调整到对应的声明处, 如果有实现类,eclipse中给予了选择. 在idea 中如果想直接调整到实现类,那么采用快 ...

  9. Angular之Providers (Value, Factory, Service and Constant )

    官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...

  10. SPA UI-router

    ------------------------------------------------------------------------------------ SPA SPA(单页面应用): ...