视差滚动

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

说明：每个单独的移动的对象用add添加进去，个数不限，参数target就是对象的ID，dir表示方向，支持top,bottom,left,right，注意top不要和bottom同时存在，left和right也是，rangX表示是允许左右移动的范围，rangeY表示的是上下移动的范围，注意方向与 rangeX或rangeY要对应，不能方向是 top或者bottom，但范围却是rangeX，这样肯定是不行的，不带这么坑爹的。

JS:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

(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>