视觉差效果 - jqyery scrollTop原理

原理是用页面的滚动高度scrollTop()来控制背景图的位置

附上源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/master.css"/>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
.part1 {background:url(images/a_03.jpg) repeat;width:100%;height:1000px;position:relative;overflow:hidden;}
.title {position:absolute;width:100%;height:1000px;left:0;top:0;background:url(images/z_01.png) top center no-repeat;z-index:10;}
.about {width:80%;height:auto;position:absolute;left:50%;margin-left:-40%;top:250px;z-index:11;font:bold 22px/36px 微软雅黑;color:#69F;}
.part2 {width:100%;height:1000px;position:relative;overflow:hidden;background:url(images/aaa.jpg) center top fixed no-repeat;}
.proshow {width:1000px;height:auto;font:16px/28px 微软雅黑;color:#fff;padding:20px;position:absolute;left:50%;top:100px;z-index:10;background:#219ae7;margin-left:-500px;position:absolute;}
.pic {width:200px;height:170px;border:solid 2px #CCC;padding:2px;background:#fff;position:absolute;z-index:12;box-shadow:3px 3px 5px #666;}
.pic1 {left:-200px;top:-170px;}
.pic2 {width:500px;height:380px;border:solid 2px #CCC;padding:2px;background:#fff;position:absolute;z-index:11;box-shadow:3px 3px 5px #666;right:100px;}
.pic3 {width:500px;height:380px;border:solid 2px #CCC;padding:2px;background:#fff;position:absolute;z-index:11;box-shadow:3px 3px 5px #666;right:100px;top:-500px;}
.pic2,.pic3 {filter:alpha(opacity=60);opacity:0.6;}
.part3 {width:100%;height:1000px;position:relative;overflow:hidden;background:url(images/kk0.jpg) center top fixed no-repeat;}
.c1 {width:345px;height:368px;background:url(images/1.png) no-repeat;position:absolute;left:20px;top:300px;z-index:11;}
.c2 {width:345px;height:368px;background:url(images/2.png) no-repeat;position:absolute;left:380px;top:60px;z-index:12;}
.c3 {width:100%;height:1000px;background:url(images/3.png) fixed 760px 0 no-repeat;position:relative;}
.c4 {width:345px;height:368px;background:url(images/4.png) no-repeat;position:absolute;right:60px;top:200px;z-index:14;}
.part4 {background:url(images/a_03.jpg) repeat;width:100%;height:1000px;position:relative;overflow:hidden;}
.end {width:100%;height:1000px;background:url(images/end_03.png) fixed 100px 0 no-repeat;position:absolute;left:0;top:0;}

</style>
</head>

<body>
<div class="part1">
    <h1 class="title"></h1>
    <div class="about">
大家好 我是Zoku沙冰杯<br />
<br />
市面上的许多沙冰奶昔雪糕都有着大量的添加剂，我们会疑问原料是什么，食品的安全性一直是困扰大家的问题，既然外面买的食品不放 心，那自己做吧，可是自己做的话又很麻烦，厨房会变得一团糟吗？好在Zoku神奇沙冰机的出现可以解决这些令人头痛的问题，3分钟就可以吃到美味的沙冰奶 昔，随心所欲做出各种口味，当然，也别做出黑暗沙冰奶昔招待家里的客人呀~<br /><br />
Zoku3分钟沙冰机创造了全新沙冰奶昔的制造方式，可以加入酸奶，咖啡，可可，椰子汁，奶茶，软糖，水果等等，只有你想不到没有做不到的沙冰奶昔。
<br /><br />
Zoku沙冰机需要提前在冰箱中冷冻24小时，然后倒入你的制作材料，只需3分钟就可以做出沙冰奶昔！
    </div>
</div>
<div class="part2">
    <div class="proshow">
        很多人都很喜欢吃冷饮，尤其是现在的小孩子和年轻人，更是热爱冰爽刺激的冷饮。自己做沙冰是很多人都想尝试一下的事情。我们知道，现在冷饮行业的利润是很高的，在一个夏天里，如果每天都吃沙冰的话，大概要花费几百元到几千元不等。而且，外面卖的沙冰卫生没有保障，有的人食用完沙冰以后拉肚子，以为是自己的肠胃受到了冰的刺激，实际上不是，是因为自己食用了不干净的沙冰，或者沙冰中的水果已经不新鲜了。物美价廉的消暑产品奶昔杯，帮助你自己做美味卫生的沙冰。
    </div>
    <div class="pic2"><a href="javascrpt:;"><img src="data:images/1.jpg" width="500" height="380" /></a></div>
    <div class="pic3"><a href="javascrpt:;"><img src="data:images/2.jpg" width="500" height="380" /></a></div>
</div>

<div class="part3">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
</div>
<div class="part4">
    <div class="end"></div>
</div>

<script>
    $(window).scroll(function(e) {
        $('.part1').css({'background-position':'0 '+($(window).scrollTop()*1.1+'px')});
        $('.title').css({'background-position':'50% '+($(window).scrollTop()*1.4+'px')});
        $('.part2').css({'background-position':'0 '+(-1 * $(window).scrollTop()*0.2)+'px'});
        $('.pic2').css({'left':$(window).scrollTop() * 0.55 + 'px','top':$(window).scrollTop() * 0.35 + 'px'});
        $('.pic3').css({'right':$(window).scrollTop() * 0.55 + 'px','top':0 + $(window).scrollTop() * 0.35 + 'px'});
        $('.part3').css({'background-position':'50%  '+(-1 * $(window).scrollTop()*0.15)+'px'});
        $('.c3').css({'background-position':'760px  '+( $(window).scrollTop()*0.1)+'px'});
        $('.part4').css({'background-position':'0 '+($(window).scrollTop()*1+'px')});
        $('.end').css({'background-position':'100px '+$(window).scrollTop()*0.1+'px'});
    });
</script>
</body>
</html>

下载地址：

http://files.cnblogs.com/files/Sinhtml/ca.rar