原理是用页面的滚动高度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. 实例讲解MySQL联合查询

    好了终于贴完了MySQL联合查询的内容了,加上上一篇一共2篇,都是我转载的,实例讲解MySQL联合查询.那下面就具体讲讲简单的JOIN的用法了.首先我们假设有2个表A和B,他们的表结构和字段分别为: ...

  2. A*八数码

    帮同学写的八数码,启发式搜索 创建两个表open,close,分别用的stl中的优先队列priority_queue和map,好久没写过代码了,bug调了半天 #include <iostrea ...

  3. (转)CentOS 日志分析

     1.了解日志文件    linux的日志文件可以说是最有用的了,日志文件可以让我们了解系统所处的状态,比如能查出哪些用户有登入,这也涉及相关的安全问题.如果我们不懂得分析日志,可能我们都不知道有些用 ...

  4. 自制单片机之五……LCD12864的驱动

    LCD12864的驱动LCD12864在市面上主要分为两种,一种是采用st7920控制器的,它一般带有中文字库字模,价格略高一点.另一种是采用KS0108控制器,它只是点阵模式,不带字库.很可惜,我的 ...

  5. Cmake ,Out of Source Build

    Out of Source build呢,就是让Cmake产生的临时垃圾文件,不关乎于项目实际本身的文件放到一个目录里,一般我们把这个目录放在项目根目录(也可以认为是根CmakeLists.txt)下 ...

  6. 转：Android模拟器连接电脑网络

    原文地址:http://www.it165.net/pro/html/201212/4444.html 第一步: 在命令行(就是开始——运行——输入cmd)模式下输入adb shell命令一般会报两种 ...

  7. hdu1796：容斥入门题

    简单的容斥入门题.. 容斥基本的公式早就知道了,但是一直不会写. 下午看到艾神在群里说的“会枚举二进制数就会容斥”,后来发现还真是这样.. 然后直接贴代码了 #include <iostream ...

  8. socket 发送Ping包

    参考链接: http://blog.csdn.net/zpxili/article/details/11542041 http://blog.csdn.net/cbuttonst/article/de ...

  9. Laravel-高级篇-Artisan

    (慕课网_轻松学会Laravel-高级篇_天秤vs永恒老师_http://www.imooc.com/learn/702) 一.概述 Artisan是Laravel中自带的命令行工具的名称 由强大的S ...

  10. jQuery的ajax jsonp跨域请求

    了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...