手风琴特效

最新推荐文章于 2024-07-24 13:45:34 发布

luckASD

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量263

点赞数

分类专栏：个人记事文章标签： css 布局 css特效 jquery 手风琴特效

本文链接：https://blog.csdn.net/luckASD/article/details/52915523

版权

个人记事专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1：第一部分就是css，很重要不用说

style type="text/css">  
            *{padding: 0; margin: 0;}  
              
            #main{  
                width:650px;   
                margin: 0 auto ;   
                height:150px;  
            }  
            #main ul{  
                width:650px;   
                height:150px;   
                border-left:solid 1px #ddd;   
                list-style: none;   
                position: relative;  
            }  
            #main ul li{  
                width:50px;   
                height:150px;   
                float: left;    
                position: relative;   
                background: #ccc;   
                cursor: pointer;   
                overflow: hidden;  
                  
            }  
            #main ul li.active{  
                width:450px;   
                height: 150px;  
            }  
            #main ul li h3{  
                width:14px;   
                font-size:14px;   
                padding: 45px 17px 0;   
                border: solid 1px #DDDDDD;   
                height:103px;  
            }  
            #main ul li div{  
                width:400px;   
                height:150px;   
                position:absolute;   
                left:50px;   
                top:0;   
                background: pink;  
            }  
            #main ul li.last{  
                position: absolute;   
                top:0;   
                right: 0;  
            }  
        </style>

2：body里面就是一堆div，不可或缺的。（好的布局会让你的网页写起来更容易。。。此处省略10000+字）

<div id="main">  
            <ul>  
                <li class="active">  
                    <h3>白玫瑰</h3>  
                    <div>11111</div>  
                </li>  
                <li>  
                    <h3>白玫瑰</h3>  
                    <div>22222</div>  
                </li>  
                <li>  
                    <h3>白玫瑰</h3>  
                    <div>33333</div>  
                </li>  
                <li>  
                    <h3>白玫瑰</h3>  
                    <div>44444</div>  
                </li>  
                <li class="last">  
                    <h3>白玫瑰</h3>  
                    <div>55555</div>  
                </li>  
            </ul>  
        </div>

3@：下面四JS的代码，不过要引用 jQuery ，版本是2.0以上的，老师说1.0到2.0之间是那些电商网站用的，因为jQuery在这段期间做了各种兼容在里面。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
        <script type="text/javascript">  
            $("#main ul li").mouseover(function(){  
                $(this).stop().animate({"width":"450px"}).siblings().stop().animate({"width":"50px"});  
            })  
</script>