视觉差效果 - 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="images/1.jpg" width="500" height="380" /></a></div> <div class="pic3"><a href="javascrpt:;"><img src="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>
下载地址：
https://files.cnblogs.com/files/Sinhtml/ca.rar
