jquery - 鼠标 x 移动动画

Question

我想要一个动画。我是后端开发人员，但我必须使用 jquery 创建动画。

动画、背景和元素位置随鼠标移动而变化。

类似于http://www.kennedyandoswald.com/#!/premiere-screen

谢谢你的帮助。

Answer 1

如果你想移动懒惰的div:

<div id="container">
    <div id="lazy"></div>
</div>

使用这段代码:

var div = document.getElementById('lazy');
var container = document.getElementById('container');

var me = function(event) {
    var x = event.clientX, //mouse position
        w = div.offsetWidth, //width of the lazy div
        m = 30, //multiplier
        square = div.getBoundingClientRect(),
        pxToBox = (x - (w/2 - square.left)), //how far is the mouse from the box?
        left =  m * pxToBox/this.offsetWidth;
    div.style.left = left + 'px'; //sets the left attribute
};

container.addEventListener('mousemove', me, false);

惰性 div 的父级必须相对于绝对定位:

#container {
    position:relative;   
    width:600px;
    height:400px;
}

#lazy {
    background-color:green;
    position:absolute;
    top:0;
    left:40;
    width:100px; height:100px;
}

这是 fiddle http://jsfiddle.net/b42a3fhk/