首页 > 代码库 > 楼梯效果

楼梯效果

2024-10-10 06:53:01   218人阅读

<!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>

 

楼梯效果


联系
我们