首页 > 代码库 > 点击后形成扩散圈 和 z-index
点击后形成扩散圈 和 z-index
点击后形成扩散圈
这个名字有点奇怪，就是在一个div被点击后，会形成一个圈，往外扩散，直至塞满整个div。
效果看这：
http://codepen.io/crab/pen/aAbvf
具体的实现就是在被点击的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>
这个代码中，从class中，就可以轻易看出，z-150肯定是在最上面的，然后是z-120，z-100，z-50
不过，事实是这样么？
z-120挡住了所有元素，它居然把150给挡住了~
事实是这样的，z-index在堆叠的时候，是根据相对于父元素的位置进行的，即z-50和z-120相比较，120大于50，所以120能挡住50上的所有元素
用数学式进行比较，就是
z-50：50
z-100：50.100
z-150：50.150
z-120：120
这样就可以清晰的看出，z-120肯定挡住了所有的元素么，可以自己研究下哦，代码在下：
http://codepen.io/crab/pen/Gwazu
参考：http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。