zoukankan      html  css  js  c++  java
  • 楼梯效果

    <!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>  
  • 相关阅读:
    XML 命名空间
    XML Schema验证
    java 解析XML文档
    Java线程:创建与启动
    CCF-CSP 201312-5 I'm stuck !
    memset函数用法
    C++的字符串多行输入
    OS复习1
    os复习2
    javamail编程2
  • 原文地址:https://www.cnblogs.com/lichunjing/p/7066311.html
Copyright © 2011-2022 走看看