炫酷的手风琴效果

你一定用过书签，也一定给你的书本加过书签，那么你见过书签式的导航吗？你一定见过手风琴，也一定知道弹奏手风琴时的它的外形变化，那么你见过手风琴式的导航吗？如果没有，请往下看：

前面的话：

　　这篇博文先通过Javascript做一个简单的手风琴效果，让大家对手风琴效果有一定的了解；紧接着，我们换jquery做类似的手风琴效果。前面的两个例子都很简单，接下来要放大招了，我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果。继续回到书签问题，既然JQ和JS都能实现那么炫酷的效果，我们用CSS3能不能做出手风琴效果的书签来呢？

用Javascript做一个简单的手风琴效果：

话不多说，我们先上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            *{
                margin: 0; 
                padding: 0;
            }
            body{
                background-color: rgba(0,0,0,.8);
            }
            div{
                margin: 20px auto;
            }
            #c {
                width: 500px;
                height: 300px;
                overflow: hidden;
            }
            p {
                float: left;
                width: 20px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="c">
            <p style="background:#9cf;width:420px;">1</p>
            <p style="background:#f9c;">2</p>
            <p style="background:#c9f;">3</p>
            <p style="background:#cf9;">4</p>
            <p style="background:#9fc;">5</p>
        </div>
    </body>
</html>

炫酷的手风琴效果

炫酷的手风琴效果

前面的话：

用Javascript做一个简单的手风琴效果：

更多相关文章

随机推荐