根据鼠标移动动画css [我该如何改进]

Question

你好

所以我开始编写一些函数，女巫会这样做（离你移动鼠标越近div越近div移动到鼠标位置on parent X axsis，最大div位置是left:-40%，最小值是{{1} }）：

注意：黑色箭头是光标（鼠标位置）

1. 
2. 
3. 

代码

HTML 标记：

left: -80%

CSS 标记：

<div class="wraper">
    <div class="ls">
        <div class="ldiv">
        </div>
    </div>
    <div class="c">
        <div class="coordinates">
        </div>
        <div class="cdiv">
        </div>
    </div>
    <div class="rs">
        <div class="rdiv">
        </div>
    </div>
</div>

Javacsript 标记：

body{
    margin: 0;
    padding: 0;
}
.wraper{
    width: 100%;
    height: 500px;
}
.ls, .rs{
    position: relative;
    float: left;
    width: 30%;
    height: 100%;
    background-color: #eeeeee;
}
.c{
    position: relative;
    float: left;
    width: 40%;
    height: 100%;
    background-color: #dddddd;
}
.cdiv{
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    background-color: red;
}

.ldiv{
    position: absolute;
    top: 30%;
    left: -80%;
    width: 80%;
    height: 40%;
    background-color: red;
}
.rdiv{
    position: absolute;
    top: 30%;
    right: -40%;
    width: 80%;
    height: 40%;
    background-color: red;
}

以下是jsFiddle

中的实例

我想要完成的事情：

1. 如何重写此代码，使其更像动画，如果我将鼠标移动到快速状态，则不会出现故障？

Answer 1

我会依赖mousemove，我会使用requestAnimationFrame [或简单的setTimeout]。 这样你就可以减轻cpu的负担，使动画更加流畅。