原理是用页面的滚动高度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. 3月20日html(二) 图片热点，网页划分，表单

    1.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <img src=" usemap="map" name=" ...

  2. jquery1.9学习笔记 之选择器(基本元素五)

    多种元素选择器  jQuery("selector1,selector2,selectorN") 例子: <!doctype html> <html lang=' ...

  3. Symfony2源码分析——启动过程2

    文章地址:http://www.hcoding.com/?p=46 上一篇分析Symfony2框架源码,探究Symfony2如何完成一个请求的前半部分,前半部分可以理解为Symfony2框架为处理请求 ...

  4. PYTHON线程知识再研习C---线程互斥锁

    结合例子,就很好理解了. 就是不要让共享变量被各个线程无序执行,导致结果不可预期 threading模块中定义了Lock类,可以方便的处理锁定: #创建锁mutex = threading.Lock( ...

  5. Qt自定义sleep延时函数（巧妙的使用时间差，但这样似乎CPU满格，而不是沉睡）

    Qt不像VC++的win32/MFC编程那样,提供了现成的sleep函数可供调用.Qt把sleep函数封装在QThread类中.子线程可以调用sleep函数.但是如果用户想在主线程实现延时功能,该怎么 ...

  6. cf437D The Child and Zoo

    D. The Child and Zoo time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  7. js获取url传递参数（转的，原作不详）

    这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: <Script languag ...

  8. c语言编程之sglib库的简单使用

    说实话自从大学毕业后已经很久没有用c语言写过程序了,一般都是使用c++,c++的stl和boost等,这些代码库大大简化了我们的编程复杂度.由于最近某种原因在次开始用c写程序.我是个比较懒的人,比较喜 ...

  9. python 间谍程序传输文件 socket编程

    本程序实现了,把目标机器的某个目录(可控)的所有的某种类型文件(可控)全部获取并传到己方的机器上. 1.用了base64的encode(infile,outfile)加密,以及decode(infil ...

  10. Canvas制作排序算法演示动画

    tips: 形象化演示排序算法可以让初学者快速理解,比较好的例子:jun-lu的SortAnimate,旧金山大学的David Galles教授的算法演示课件.最近在看canvas,试着用js+can ...