视觉差效果 - 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="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原理的更多相关文章

原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）
想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...
MG--滚动的视觉差效果
#几句代码完成tableView滚动的视觉差 - 效果图 (失帧严重)![](http://upload-images.jianshu.io/upload_images/1429890-f2c8577 ...
css实现视觉差的滚动
之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果 ...
Android平台中的三种翻页效果机器实现原理
本文给开发者集中展现了Android平台中的三种翻页效果机器实现原理,希望能够对开发者有实际的帮助价值! 第一种翻页效果如下: 实现原理: 当前手指触摸点为a,则 a点坐标为(ax,ay), ...
视觉差双排listview效果
https://github.com/bavariama1/ListBuddies
实现仿知乎的开场动画，图片zoomin的效果，实现原理，没加动效
知乎等应用的开场动画是:全屏显示一副图像,并以图像的中间为原点,实现放大(也就是zoomin)的动画,让等待的过程不再单调乏味. 最近不是很忙,因此想了下如何实现这种效果,方案是:采用调整imagev ...
css的一些小技巧！页面视觉差！
相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎. 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括.这导致了一个很好的光学效应,使参观者的注意. 在网页设计中,为了实现这 ...
自定义tab吸顶效果一（原理）
PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
JS美女图片切换带视觉差
使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...

随机推荐

Javascript计算密码的强度
用Javascript评估用户输入密码的强度 1.如果密码少于5位,那么就认为这是一个弱密码.2.如果密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码.3.如果密码由 ...
logstash match
[elk@zjtest7-frontend config]$ cat stdin04.conf input { stdin { } } filter { # drop sleep events gro ...
wikioi3052 多米诺
题目描述 Description 一个矩形可以划分成M*N个小正方形,其中有一些小正方形不能使用.一个多米诺骨牌占用两个相邻的小正方形.试问整个区域内最多可以不重叠地放多少个多米诺骨牌且不占用任何一个 ...
js设计模式系列之(一)请节约你的请求-代理模式
What’s the proxy pattern? 代理模式其实就是将违反单一性原则的类给抽离出来,尽量满足开放和封闭的原则. 相当于一个类的行为只是一种,但是你可以给这个类添加额外的行为.比如: 一 ...
浅谈c语言中的堆
操作系统堆管理器管理: 堆管理器是操作系统的一个模块,堆管理内存分配灵活,按需分配. 大块内存: 堆内存管理者总量很大的操作系统内存块,各进程可以按需申请使用,使用完释放. 程序手动申请&释放 ...
Window的匿名Closing 事件
group.Closing += (sender, e) => { try { Code here } } catch (Exception ex) { Exception here } } ...
php 实现购物车
<?php class Cart{ public function Cart() { if(!isset($_SESSION['cart'])){ ...
eclispe远程调试tomcat
在eclispe中新建web应用,名字叫webtest.里面只有一个HelloServlet.Web.xml配置如下. 修改tomcat的启动脚本startup.bat.复制startup.bat为s ...
HTML之一天学会html(常用标签+网页架构)
1. 网页文件的创建新建一个文本文件,将其命名为xxx.html或者xxx.htm(注意后缀名) 2. 简单的html页面的编写在网页中都是通过标签来指定相应的显示内容,所有的页面内容都必须在 ...
阿里云安装docker
选centos6.5输入操作系统 yum install docker-io docker -d 提示没有备用IP地址可以用来桥接卡接下来的网卡中编辑eth0 DEVICE=eth0 ONBOOT ...

视觉差效果 - jqyery scrollTop原理

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

随机推荐

热门专题