视差滚动

最近在很多地方很现这种效果，所以就写了个。

说明：每个单独的移动的对象用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>

效果图：