原理是用页面的滚动高度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

视觉差效果 - jqyery scrollTop原理的更多相关文章

  1. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

  2. MG--滚动的视觉差效果

    #几句代码完成tableView滚动的视觉差 - 效果图 (失帧严重)![](http://upload-images.jianshu.io/upload_images/1429890-f2c8577 ...

  3. css实现视觉差的滚动

    之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果 ...

  4. Android平台中的三种翻页效果机器实现原理

    本文给开发者集中展现了Android平台中的三种翻页效果机器实现原理,希望能够对开发者有实际的帮助价值! 第一种翻页效果如下:     实现原理: 当前手指触摸点为a,则 a点坐标为(ax,ay), ...

  5. 视觉差双排listview效果

    https://github.com/bavariama1/ListBuddies

  6. 实现仿知乎的开场动画，图片zoomin的效果，实现原理，没加动效

    知乎等应用的开场动画是:全屏显示一副图像,并以图像的中间为原点,实现放大(也就是zoomin)的动画,让等待的过程不再单调乏味. 最近不是很忙,因此想了下如何实现这种效果,方案是:采用调整imagev ...

  7. css的一些小技巧！页面视觉差！

    相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎. 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括.这导致了一个很好的光学效应,使参观者的注意. 在网页设计中,为了实现这 ...

  8. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  9. JS美女图片切换带视觉差

    使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...

随机推荐

  1. 神奇的match和replace

    源自跟奈落大叔的讨论,PHP和JavaScript的比较. 正则: 先说几个正则写法: () 选择匹配一组, (?:) 降低 () 的优先级, .*? 和 .+? ,阻止 . 和 + 的贪婪. 还有一 ...

  2. ie7 不兼容overflow:hidden;

    用overflow:hidden; 隐藏不需要显示的数据,在IE6\IE8都显示正常,但是在ie7中就是不起作用,万恶的IE7啊.后来加了一句position:relative; 好了... stat ...

  3. C语言格式化输入输出函数

    一:格式输出函数printf() 1.调用形式一般为:printf("格式化控制字符串",输出表列): 2.格式化控制字符串用于指定输出格式,它有三种形式: 1.格式说明符:规定了 ...

  4. css 画竖着线条

    <p>table控制:<!-- height为横线的粗度,width为长度 --><table width=700>     <tr>    <t ...

  5. FJ省队集训DAY2 T2

    思路:我们可以考虑三角剖分,这样问题就变成考虑三角形的选取概率和三角形内有多少个点了. 先用树状数组预处理出三角剖分的三角形中有多少个点,然后用线段树维护,先用原点极角排序,然后枚举i,再以i极角排序 ...

  6. Codeforces 351B Jeff and Furik

    http://codeforces.com/problemset/problem/351/B 题意:两个人轮流游戏,先手交换相邻两个数,后手先抛硬币,正面就左大右小换,反面就右大左小换,随机找到一对数 ...

  7. Codeforces 479E Riding in a Lift

    http://codeforces.com/problemset/problem/432/D 题目大意: 给出一栋n层的楼,初始在a层,b层不能去,每次走的距离必须小于当前位置到b的距离,问用电梯来回 ...

  8. BOT、BT、PPP形式介绍(3)

    PPP     20世纪90年代后,一种崭新的融资模式-PPP模式(Public-Private-Partnership,即“公共部门-私人企业-合作”的模式)在西方特别是欧洲流行起来,在公共基础设施 ...

  9. NOI2012 美食节

    http://www.lydsy.com/JudgeOnline/problem.php?id=2879 费用流. 我们发现,每个厨师做的倒数第k道菜对总等待时间的贡献为k*做这道菜的时间. 将每个厨 ...

  10. DateTime字段控件值显示短格式的做法

    后台取dateTime格式,前台格式化就好了 <input type="text" name="txtPartyTime" id="txtPar ...