1.纯JS实现
<script language="javascript" type="text/javascript">
document.onmousemove=function(evt){
evt=evt || window.event;
showP(evt.clientX,evt.clientY);
}
var middleX=650,middleY=350//中心坐标
function showP(x,y)
{
xP=(x-500)/500;
yP=(y-250)/250;
document.getElementById("lay1").style.left=(350+xP*20)+"px";// lay1的左右移动区间是正负20像素
document.getElementById("lay1").style.top=(160+yP*15)+"px";// lay1的上下移动区间是正负15像素
document.getElementById("lay2").style.left=(300+xP*40)+"px";// lay2的左右移动区间是正负40像素
document.getElementById("lay2").style.top=(130+yP*27)+"px";// lay2的上下移动区间是正负27像素
document.getElementById("lay3").style.left=(250+xP*60)+"px";// lay3的左右移动区间是正负60像素
document.getElementById("lay3").style.top=(110+yP*35)+"px";// lay3的上下移动区间是正负35像素
}
</script>
[demo]
这种方式需要已知宽度和高度。从而得出这片区域的中心点。
设可以移动区域为m，所有最大可以位移的值为m,意味着，当鼠标在离中心点最远的地方的时候，刚好对应的位移是m。设中心点为(x,y),鼠标所在的点为(xP,yP),通过xP-x,yP-y即为最远的点。所以上面有
xP=(x-500)/500;
yP=(y-250)/250;
通过除以中心点的值得到百分比。当百分比为100%的时候，即是最远的点。而后面的(350+xP*20)中的350是本身这个DIV的left
2.JS库 - parallax.js
