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;
}

这是小提琴http://jsfiddle.net/b42a3fhk/

用鼠标移动动画

1 个答案: