楼梯效果

Posted 2020-09-24 Daisylcj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了楼梯效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <script src="jquery.js"></script>  
        <style type="text/css">  
            #wra div{  
                width: 1028px;  
                height: 726px;  
                text-align: center;  
                font-size: 100PX;  
                line-height:726px;  
            }  
            #wra #div1{  
                background: red;  
            }  
            #wra #div2{  
                background: oldlace;  
            }  
            #wra #div3{  
                background: palegreen;  
            }  
            #wrap{  
                width: 100px;  
                height: 300px;  
                position: fixed;  
                left: 1000px;  
                top: 300px;  
                background: oldlace;  
                  
            }  
            #wrap div{  
                width:100px ;  
                height: 100px;  
                text-align: center;  
                line-height: 100px;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="wra">  
            <div id="div1">div1</div>  
            <div id="div2">div2</div>  
            <div id="div3">div3</div>  
            <div id="div4">div4</div>  
        </div>  
        <div id="wrap">  
            <div >1</div>  
            <div >2</div>  
            <div >3</div>  
        </div>  
    </body>  
    <script type="text/javascript">  
        $(function(){  
            $(‘#wrap div‘).click(function(){  
                $(document).scrollTop($(‘#wra‘).children().eq($(this).index()).offset().top);  
            })  
        })  
    </script>  
</html>

以上是关于楼梯效果的主要内容，如果未能解决你的问题，请参考以下文章

原生js实现京东商城楼梯效果

炫酷 CSS 背景效果的 10 个代码片段