楼梯效果

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

查看全文

相关阅读:
oracle 监听添加ip
重装系统windows
oracle user pwd
mybatis
sum行列合计
 IIS8.5 运行WCF
exp自动备份在bat中不执行
 oem 重建
 yum install oracle-validated
MSHflexgrid控件删除选中行

原文地址：https://www.cnblogs.com/lichunjing/p/7066311.html