Question

我有一个小提琴here。

此外，为了方便和记录，这里是纯HTML格式的副本。

<html>
<head>
<title>Test shadows</title>
<style>
body {
    cursor: url('http://solar-center.stanford.edu/images/metallic.gif'), auto;
}
#wrapper {
    width: 960px;
    margin: 10px auto;
    outline: 1px solid black;
    padding: 5px;
}
.castsshadow {
    display: inline-block;
    border: 1px solid #50535C;
    width: 300px;
    height: 100px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
    padding: 10px;
}
.castsshadow div {
    z-index: 2;
    margin: -10px;
    padding: 10px;
    position: absolute;
    background: lightgrey;
    width: inherit;
    height: inherit;
    border-radius: 20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(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(
                "<div>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)) + "</div>");
            $(this).css({
                boxShadow: -(e.pageX - (offset.left + (width / 2))) / 5 + "px " + (-(e.pageY - (offset.top + (height / 2))) / 5) + "px 10px -5px #404040"
            });
        });

    });

});
</script>
</head>
<body>
  <div id="wrapper">
      <div id="div1" class="castsshadow"><div>Div 1</div></div>
      <div id="div2" class="castsshadow"><div>Div 2</div></div>
      <div id="div3" class="castsshadow"><div>Div 3</div></div>
      <div id="div4" class="castsshadow"><div>Div 4</div></div>
      <p>This is a gap.</p>
      <div id="div5" class="castsshadow"><div>Div 5</div></div>
      <div id="div5" class="castsshadow"><div>Div 6</div></div>
      <div id="div5" class="castsshadow"><div>Div 7</div></div>
      <div id="div5" class="castsshadow"><div>Div 8</div></div>
      <div id="div5" class="castsshadow"><div>Div 9</div></div>
      <div id="div5" class="castsshadow"><div>Div 10</div></div>
      <div id="div5" class="castsshadow"><div>Div 11</div></div>
      <div id="div5" class="castsshadow"><div>Div 12</div></div>
  </div>
</body>
</html>

我希望改变计算，使得指针/太阳更接近“凸起”的div。这意味着更远的div会让他们的阴影更远（可能是指数级别？）当你将鼠标扫过一个特定的div时，它的阴影会快速扫过。

计算位置的意义点是什么？我试过乘以e.pageY，但这没有用。你可以说，我在数学上并不擅长，这就是为什么我在div中输入这么多数据进行测试的原因。

修改位置计算以改变深度感知

0 个答案: