最近在很多地方很现这种效果，所以就写了个。
说明：每个单独的移动的对象用add添加进去，个数不限，参数target就是对象的ID，dir表示方向，支持top,bottom,left,right，注意top不要和bottom同时存在，left和right也是，rangX表示是允许左右移动的范围，rangeY表示的是上下移动的范围，注意方向与 rangeX或rangeY要对应，不能方向是 top或者bottom，但范围却是rangeX，这样肯定是不行的，不带这么坑爹的。
JS:
(function(){
var parallaxScrolling = function(opts){
return new parallaxScrolling.prototype.init(opts);
};
parallaxScrolling.prototype = {
constructor:parallaxScrolling,
init:function(opts){
var set = extend({
target:''
},opts||{});
this.items = [];
this.defaultPos = [];
this.currentPos = [];
this.target = $(set.target);
this.width = this.target.offsetWidth;
this.height = this.target.offsetHeight;
var mark = createEl('<span style="background:#fff;opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;width:'+this.width+'px;height:'+this.height+'px;"></span>',this.target);
var _this = this;
var _mouseoverHandler = this.mouseoverHandler.call(this);
var _mousemoveHandler = this.mousemoveHandler.call(this);
addEvent(mark,'mouseover',_mouseoverHandler);
addEvent(mark,'mousemove',_mousemoveHandler);
addEvent(mark,'mouseout',function(){ _this.go = false;});
return this;
},
add:function(option){
var exsit = index(this.items,function(item){ return item.target == option.target}) != -1,el
if(!exsit){
el = $(option.target);
this.items.push(option);
this.defaultPos.push({
'y':parseInt(getStyle(el,'top')),
'x':parseInt(getStyle(el,'left'))
});
};
return this;
},
remove:function(el){
var exsit = index(this.items,function(item){ return item.target == option.target});
if(exsit == -1) return;
this.items.splice(exsit,1);
this.defaultPos.splice(exsit,1);
return this;
},
mouseoverHandler:function(){
var _this = this;
return function(e){
_this.pos = getMousePos(e);
_this.go = true;
_this.getCurrentPos();
};
},
mousemoveHandler:function(e){
var _this = this;
return function(e){
var nPos = getMousePos(e);
if(!_this.go) return;
_this.setAllElementsPos(nPos);
};
},
setAllElementsPos:function(nPos){
for(var i=0,len=this.items.length;i<len;i++){
this.setElementPos(this.items[i],this.defaultPos[i],this.currentPos[i],nPos);
}
},
setElementPos:function(item,dPos,cPos,nPos){
var t = $(item.target),rangeX = item.rangeX,rangeY = item.rangeY,dir = item.dir,speed = item.speed;
switch(dir){
case 'left' :
t.style.left = Math.max((dPos.x-rangeX),Math.min(cPos.x - (nPos.x - this.pos.x)*speed,dPos.x)) + 'px';
break;
case 'right' :
t.style.left = Math.min((dPos.x+rangeX),Math.max(cPos.x + (nPos.x - this.pos.x)*speed,dPos.x)) + 'px';
break;
case 'top' :
t.style.top = Math.max((dPos.y-rangeY),Math.min(cPos.y - (nPos.y - this.pos.y)*speed,dPos.y)) + 'px';
break;
case 'bottom' :
t.style.top = Math.min((dPos.y+rangeY),Math.max(cPos.y + (nPos.y - this.pos.y)*speed,dPos.y)) + 'px';
break;
};
},
getCurrentPos:function(){
this.currentPos = [];
for(var i=0,len=this.items.length;i<len;i++){
var el = $(this.items[i].target);
this.currentPos.push({
'y':parseInt(getStyle(el,'top')),
'x':parseInt(getStyle(el,'left'))
})
}
}
};
parallaxScrolling.prototype.init.prototype = parallaxScrolling.prototype;
window.parallaxScrolling = parallaxScrolling;
/*************************************************************************/
function $(id){
return typeof id == 'string' ? document.getElementById(id) : id;
};
function extend(target,source){
for(var key in source) target[key] = source[key];
return target;
};
function getMousePos(e){
e = e || window.event;
if(e.pageX || e.pageY) return { x:e.pageX,y:e.pageY};
return {
x:e.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
y:e.clientY + document.documentElement.srcollTop - document.body.clientTop
};
};
function addEvent(el,type,fn){
if(typeof el.addEventListener != 'undefined'){
el.addEventListener(type,fn,false);
}else if(typeof el.attachEvent != 'undefined'){
el.attachEvent('on'+type,fn);
}else{
el['on'+type] = fn;
};
};
function removeEvent(el,type,fn){
if(typeof el.removeEventListener != 'undefined'){
el.removeEventListener(type,fn,false);
}else if(typeof el.detachEvent != 'undefined'){
el.detachEvent('on'+type,fn);
}else{
el['on'+type] = null;
};
};
function createEl(html,parent){
var node,div = document.createElement('div');
div.innerHTML = html;
node = div.firstChild;
return parent ? parent.appendChild(node) : node;
};
function index(arr,fn){
for(var i=0,len=arr.length;i<len;i++){
if(fn(arr[i],i,arr) === true) return i;
};
return -1;
};
function getStyle(el,key){
return (el.style[key] == '') ? (el.currentStyle || document.defaultView.getComputedStyle(el,null))[key] : el.style[key];
}
})();
HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
* { padding:0; margin:0;}
img {display:block;}
#fuck{width:950px;height:250px;position:relative;margin:50px auto;overflow:hidden;}
#fuck img {position:absolute;}
#bg {top:0;left:0;}
#brass {top:0;left:-250px;}
#butterflies {top:0;left:0;}
#frog {top:0;left:100px;}
</style>
</head>
<body>
<div id="fuck">
<img src="images/background.jpg" alt="" id="bg"/>
<img src="images/grass.png" alt="" id="brass"/>
<img src="images/butterflies.png" alt="" id="butterflies"/>
<img src="images/frog.png" alt="" id="frog"/>
</div>
<script type="text/javascript" src="parallaxScrolling.js"></script>
<script type="text/javascript">
parallaxScrolling({
'target':'fuck'
}).add({
'target':'brass',
'dir':'right',
'rangeX':200,
'speed':0.5
}).add({
'target':'butterflies',
'dir':'left',
'rangeX':250,
'speed':0.8
}).add({
'target':'frog',
'dir':'right',
'rangeX':400,
'speed':1
})
</script>
</body>
</html>
效果图：
