视差滚动

  近年来，视差滚动效果越来越流行，之前看到很多好多个地方出现了这个效果感觉特别的炫酷，之后 特意去查看了很多资料学习
  了下，接下来就和大家分享一下我所学习到的。
**首先什么是视差滚动呢？**
简单的说：视差滚动(Parallax Scrolling)就是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。（大家可以
查看QQ浏览器官方网站查看效果）

下面我们就来简单的介绍一下这款未来网页设计的热点趋势之一的“视差滚动”吧。

首先是简单的页面布局(为了方便这里引用的都是网上的图片)：

        <div id="back" class="scene">
        <img id="img01" src="http://www.alloyteam.com/wp-content/uploads/2014/01/001.png">
        <img id="img04" src="http://www.alloyteam.com/wp-content/uploads/2014/01/004.png">
        <img id="img07" src="http://www.alloyteam.com/wp-content/uploads/2014/01/007.png">
    </div>
    <div id="center" class="scene">
        <img id="img02" src="http://www.alloyteam.com/wp-content/uploads/2014/01/002.png">
        <img id="img05" src="http://www.alloyteam.com/wp-content/uploads/2014/01/005.png">
        <img id="img08" src="http://www.alloyteam.com/wp-content/uploads/2014/01/008.png">
    </div>
    <div id="front" class="scene">
        <img id="img03" src="http://www.alloyteam.com/wp-content/uploads/2014/01/003.png">
        <img id="img06" src="http://www.alloyteam.com/wp-content/uploads/2014/01/006.png">
        <img id="img09" src="http://www.alloyteam.com/wp-content/uploads/2014/01/009.png">
    </div>

接下来就是对给它们添加css样式（关键词：定位。另外给每张图片加top和left属性是为了更好的效果展示。）

<style>
body { height:3000px;}
.scene { position:absolute; width:100%; height:100%; }
img { position:absolute; }
#img01 { width:150px; top:200px; left:50px; }
#img02 { width:300px; top:800px; left:450px; }
#img03 { top:600px; left:150px; }
#img04 { width:200px; top:800px; left:400px; }
#img05 { width:300px; top:500px; left:500px; }
#img06 {top:1200px; }
#img07 { width:150px; top:250px; left:550px; }
#img08 { width:300px; top:100px; left:900px; }
#img09 {top:1400px; left:400px; }
</style>

最后就是最最重要的js了（eventTarget：执行这个事件的对象，比如div、ul<这里是：window>；
eventType：事件类型<这里是：scroll>；
eventHandler ：函数。<这里是：自定义的onScroll函数>）

<script>
    var Back = document.getElementById("back");
    Center = document.getElementById("center");
    Front = document.getElementById("front");
var top1 = 0;
    top2 = 200;
    top3 = 700;
addEvent(window,'scroll',onScroll);
onScroll();
function onScroll(e){ 
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    Back.style.top = top1+scrollTop*0.9+"px";
    Center.style.top = top2+scrollTop*0.7+"px";
    Front.style.top = top3+scrollTop*0.3+"px";
}
function addEvent(eventTarget,eventType,eventHandler){ 
    if(eventTarget.addEventListener){ 
        eventTarget.addEventListener(eventType,eventHandler,false);
    } else {
        if (eventTarget.attachEvent) {
            eventType = "on" + eventType;
            eventTarget.attachEvent(eventType, eventHandler);
        } else {
            eventTarget["on" + eventType] = eventHandler;
        }
    }
}

</script>

好了，以上代码就可以很好的实现我们想要的视差滚动效果了。