当前位置: 代码迷 >> JavaScript >> 关于onmousewheel的有关问题.好纠结
  详细解决方案

关于onmousewheel的有关问题.好纠结

热度:97   发布时间:2012-04-17 15:06:33.0
关于onmousewheel的问题.好纠结啊
我想每次鼠标轮滚的时候就加1.返回就减1;
要是连续快速滚轮的话,e.wheelDelta是240..
这个问题怎么解决啊?
HTML code
<!doctype html>
<html>
    <head>
        <style type="text/css">
            *{padding:0;margin:0;}
            .fl{float:left;display:inline;}
            .fr{float:right;display:inline;}
            #wrap{width:300px;margin:55px auto;height:125px;position:relative;overflow:hidden;float:left}
            #list{position:absolute;top:0;left:0;}
            #slider{width:8px;height:125px;background:#ccc;float:left;margin-top:55px;position:relative}
            #sliderbtn{position:absolute;top:0;left:0;height:30px;width:8px;background:orange}
        </style>
        <!--<script type="text/javascript" src="jquery-1.6.min.js">
        </script>-->
    </head>

    <body>

        <div id="wrap">
            <ul id="list">
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
                <li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
            </ul>
        </div>
        <div id="slider">
            <div id="sliderbtn">
            </div>
        </div>


            <script type="text/javascript">
                var $ = function(id){return document.getElementById(id)}
                var obj = {
                    addEvent:function(e){
                        return e || window.event;
                    },
                    eventHandler:function(elem,type,func){
                        if(elem.addEventListener){
                            elem.addEventListener(type,func,false)
                        }else if(elem.attachEvent){
                            elem.attachEvent("on"+type,func)
                        }else{
                            elem["on"+type] = func;
                        }
                    },
                    removeHandler:function(elem,type,func){
                        if(elem.removeEventListener){
                            elem.removeEventListener(type,func,false)
                        }else if(elem.detachEvent){
                            elem.detachEvent("on"+type,func)
                        }else{
                            elem["on"+type] = null;   
                        }
                    }
                }
                var sliderbtn = $("sliderbtn");
                var slider = $("slider");
                var wrap = $("wrap");
                var list = $("list");
                var listTar = list.offsetHeight - wrap.offsetHeight;
                var sliderTar = slider.offsetHeight - sliderbtn.offsetHeight;
                var result = listTar / sliderTar;
                obj.eventHandler(sliderbtn,"mousedown",aa)
                function aa(e){
                    e = obj.addEvent(e);
                     posY = e.clientY - this.offsetTop;
                     if(e.preventDefault){
                            e.preventDefault()
                    }
                    obj.eventHandler(document,"mousemove",bb)
                    obj.eventHandler(document,"mouseup",function(){
                        obj.removeHandler(document,"mousemove",bb);
                    })
                }

                function bb(e){
                        var e = obj.addEvent(e);
                        var tar = e.clientY - posY;
                        
                        sliderbtn.style.top = tar +"px";
                        list.style.top = tar * -result +"px";
                        if(tar < 0){
                            sliderbtn.style.top = "0px";
                            list.style.top = "0px";
                        }
                        if(tar > sliderTar){
                            list.style.top = -listTar +"px";
                            sliderbtn.style.top = sliderTar+"px";
                        }
                }
                obj.eventHandler(list,"mousewheel",function(e){
                    e = obj.addEvent(e);
                    //alert(e.wheelDelta)
                    if(e.wheelDelta < 0){
                        h = e.wheelDelta - -119;
                        console.log(e.wheelDelta+"d")
                    }else{
                        h = e.wheelDelta - 119;
                        console.log(e.wheelDelta)
                    }
                    this.style.top = (this.offsetTop + h) +"px";
                    console.log(this.offsetTop + h)
                })
                
            </script>
    </body>
    </html>

 
  相关解决方案