demo 鼠标滚动切屏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul,ol{
                list-style: none;
            }
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
            body{
                overflow: hidden;
            }
            #ul{
                width: 100%;
                height: 100%;
            }
            ul li{
                width: 100%;
                height: 100%;
            }
            #ol{
                position: fixed;
                top: 0;
                left: 50px;
            }
            #ol li{
                width: 50px;
                height: 50px;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li>首页</li>
            <li>关注</li>
            <li>动态</li>
            <li>风格</li>
            <li>作品</li>
        </ul>
        <ol id="ol">
            <li>首页</li>
            <li>关注</li>
            <li>动态</li>
            <li>风格</li>
            <li>作品</li>
        </ol>
    </body>
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
    <script type="text/javascript">
        var bgcolor = ['pink','cyan','red','orange','green'];
        var uli = $('ul').children();
        var oli = $('ol').children();
        
        $.each(bgcolor,function(k,v){
            uli.eq(k).css('background',bgcolor[k]);
            oli.eq(k).css('background',bgcolor[k]);
            oli.click(function(){
                $.toset(uli,$(this).index())
            });
        });
        
        var h = window.innerHeight;
        var num = 0;
        document.onmousewheel=function(e){
            if(e.deltaY==100){
                if(num<4){
                    num++;
                }
            }else{
                if(num>0){
                    num--
                }
                
            }
            console.log(num)
            
            window.scrollTo(0,num*h);
            
            
            
            
        }
        
        
    </script>
</html>

推荐阅读更多精彩内容