码迷,mamicode.com
首页 > 其他好文 > 详细

楼梯效果

时间:2017-06-22 18:33:41      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:title   ldl   center   javascrip   this   asc   index   function   char   

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

 

楼梯效果

标签:title   ldl   center   javascrip   this   asc   index   function   char   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!