原理是用页面的滚动高度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. 现有有N个学生的数据记录，每个记录包括学号、姓名、三科成绩。 编写一个函数input,用来输入一个学生的数据记录。 编写一个函数print,打印一个学生的数据记录。 在主函数调用这两个函数，读取N条记录输入，再按要求输出。 N<100

    #include <iostream> using namespace std; struct student {char num[100];  char name[100];  int ...

  2. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  3. C语言初学 比较三个数中最大值的问题

    #include<stdio.h> #include<math.h> main() { int x,y,n,m ,z; scanf("%d%d%d",&am ...

  4. Python学习笔记总结(三)类

    一.类简单介绍 1.介绍 类是Python面向对象程序设计(OOP)的主要工具,类建立使用class语句,通过class定义的对象. 类和模块的差异,类是语句,模块是文件. 类和实例 实例:代表程序领 ...

  5. JAVA_build_ant_cmd pass muti param

    ant -f buildFileName -Dpropretyname1=value1  -Dpropretyname2=value2 ant [options] [target [target2 [ ...

  6. 【转】sublime text 2 中文乱码解决办法

    sublime text 2是一款非常优秀的跨平台文本及源代码编辑器,本人非常喜欢,但是不支持GB2312和GBK编码在某些时候比较麻烦.可以通过向sublime text 中添加编码类型转换包(比如 ...

  7. Qt下使用的静态链接库------ *.lib转化为mingw使用的.a格式的静态库

    使用MinGW附带的工具reimp.exe,该工具一般在MinGW in目录下,其readme文档在MinGWdoc eimp目录下, 方法很简单,比如: C:CodeBlocksMinGWlibdx ...

  8. Android XML文档解析(一)——SAX解析

    ---------------------------------------------------------------------------------------------------- ...

  9. 【转】解决java.lang.IllegalStateException: The content of the adapter has changed but ListView...的问题

    原文网址:http://blog.csdn.net/ueryueryuery/article/details/20607845 我写了一个Dialog,Dialog中有一个ListView,想要点Li ...

  10. hdu4623：crime 数学优化dp

    鞍山热身赛的题,也是去年多校原题 题目大意: 求n个数的排列中满足相邻两个数互质的排列的数量并取模 当时的思路就是状压dp.. dp[i][state]  state用二进制记录某个数是否被取走,i ...