Question

我想在某些div上获得动态阴影。所以我正在做以下事情：

HTML

  <div id="wrapper">
   <div id="div1" class="castsshadow">Div 1</div>
   <div id="div2" class="castsshadow">Div 2</div>
   <div id="div3" class="castsshadow">Div 3</div>
   <div id="div4" class="castsshadow">Div 4</div>
   <div id="div5" class="castsshadow">Div 5</div>
  </div>

CSS

#wrapper
{
    width: 960px;
    margin: 10px auto;
    outline: 1px solid black;
    padding: 5px;
}

.castsshadow
{
    position: relative;
    display: inline-block;
    border: 1px solid #50535C;
    background-color: white;
    width: 300px;
    height: 100px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
    padding: 10px;
}

使用Javascript / JQuery的

$(document).ready(function(){

 $(document).mousemove(function(e){

  $(".castsshadow").each(function(i) {
   var offset = $(this).offset();
   var width = $(this).width();
   var height = $(this).height();
   $(this).html(
    "X Axis : " + e.pageX
    + " Y Axis : " + e.pageY + "<br>"
    + "X Offset : " + offset.left
    + " Y Offset : " + offset.top + "<br>"
    + "Height : " + height
    + " Width : " + width + "<br>"
    + "X Center : " + (offset.left + (width/2))
    + " Y Center : " + (offset.top + (height/2))
   );
   $(this).css({
    boxShadow: -(e.pageX-(offset.left+(width/2)))/10 + "px " + (-(e.pageY-(offset.top+(height/2)))/10) + "px 10px -10px #404040"
   });
  });

 });

});

在这里小提琴：http://jsfiddle.net/feY6C/

我遇到的问题是阴影在其他div前面。有没有办法阻止这种情况发生？

Answer 1

好像你必须为你现在拥有的每一个制作另一个div。例如，克隆您当前拥有的内容，并在每个上面放置一个阴影，另一个放置内容。您可以使用JS来使克隆动态化。我会稍微给你写一个jsfiddle。

更新

~~你走了，这就是我的意思：http://jsfiddle.net/feY6C/7/~~

~~请注意，我必须禁用你的JS，因为它会覆盖我的孩子div（现在会重写它，但是想先向你展示我的想法，我添加了一个固定的阴影-15px 0）那个~~我不得不删除父div的定位。每个div都变成这样：

<div id="div1" class="castsshadow"><div>Div 1</div></div>

他们的CSS：

.castsshadow div {
z-index: 2;
position: absolute;
background: white;
width: inherit;
height: inherit;
border-radius: 20px;
margin: -10px;
padding: 10px;
}

这就是现场JS：http://jsfiddle.net/feY6C/31/

底线：我将每个div的内容包装在一个子div中，使得div与父级的维度和更高的z-index完全相同。它们是动态构建的，因此您永远不必担心它们，并且定位没有问题。

Answer 2

我没有时间进一步阐述我的答案;但你可以给div一个z-index，它是根据从光标到div中心的距离计算的。

最近的div（到光标）得到更低的z-index，最远的div得到更高的z-index。

（行中的东西：以像素为单位的距离/ 20 - 在不太高的范围内给出z-index值

让阴影落后于所有元素

2 个答案: