码迷,mamicode.com
首页 > 其他好文 > 详细

视觉差效果 - jqyery scrollTop原理

时间:2015-09-28 14:41:38      阅读:341      评论:0      收藏:0      [点我收藏+]

标签:

原理是用页面的滚动高度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="images/1.jpg" width="500" height="380" /></a></div>
    <div class="pic3"><a href="javascrpt:;"><img src="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原理

标签:

原文地址:http://www.cnblogs.com/Sinhtml/p/4843859.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!