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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容