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>動態(tài)</li>
            <li>風格</li>
            <li>作品</li>
        </ul>
        <ol id="ol">
            <li>首頁</li>
            <li>關注</li>
            <li>動態(tài)</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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容