点击后形成扩散圈和 z-index

时间：2014-07-21 00:08:06 阅读：294 评论：0 收藏：0 [点我收藏+]

点击后形成扩散圈

这个名字有点奇怪，就是在一个div被点击后，会形成一个圈，往外扩散，直至塞满整个div。

效果看这：

具体的实现就是在被点击的div中加入svg，然后其中的circle不断扩大，最后remove掉。在这里用了jquery库。

js代码和css代码很简单，大家自己跑一下就知道了。

<html>
    <head>
        <style type="text/css">
            div.col{
                float: left;
                height: 60px;
                margin: 10px;
                position: relative;
            }
            .orange{
                background: orange;
            }
            .blue{
                background: lightblue;
            }
            .small{
                width: 50px;
            }
            .big{
                width: 100px;
            }
            svg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            circle{
                fill: rgba(255,255,255,0.1);
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(‘.col‘).click(function(event) {
                    var target = $(this);
                    var clickX = event.pageX-target.offset().left;
                    var clickY = event.pageY-target.offset().top;
                    //清理掉已经存在的svg
                    target.find(‘svg‘).remove();
                    //append svg，用circle实现动画
                    target.append(‘<svg><circle cx=‘+clickX+‘ cy=‘+clickY+‘ r="0"></svg>‘);

                    target.find(‘circle‘).animate(
                        {
                            r:target.outerWidth()
                        },
                        {
                            step:function(value){
                                $(this).attr(‘r‘, value);
                            },
                            duration: 1000,
                            specialEasing:‘linear‘,
                            complete:function(){
                                $(this).parent(‘svg‘).remove();
                            }
                        })
                    .click(function(event) {
                        target.trigger(event);
                    });
                });
            })
        </script>
    </head>
    <body>
        <div class=‘col orange big‘></div>
        <div class=‘col blue small‘></div>
    </body>
</html>

z-index

以前认为，z-index值越大，元素就在越上面。突然发现，事实没有这么简单

z-index就像是叠放一堆东西的时候，用于确定次序的。简单的环境下，确实是z-index越大，元素在越上面

不过，看下面这个例子

<div class=‘z-50 absolute yellow‘>
  <div class=‘z-100 absolute blue‘></div>
  <div class=‘z-150 absolute red‘></div>
</div>
<div class=‘z-120 absolute grey‘></div>