滚动视觉差原理
2015-11-19 19:07
302 查看
首先要知道一个api
window.scrollTo(x,y)
其中x,y分别为滚动条向x,y方向移动的位置,如果网页宽度不够则不出现滚动条,设多少都没用。
三个区域都是绝对定位,只不过z-index的大小不同,这样当window滚动时,三个layer按不同速度滚动,基准速度是scroll,即window滚动的基本速度。
window.scrollTo(x,y)
其中x,y分别为滚动条向x,y方向移动的位置,如果网页宽度不够则不出现滚动条,设多少都没用。
$(function() { $(window).scroll(function(){ var scrolled = $(this).scrollTop(); $('#area1').css('top',(0-(scrolled*.75))+'px'); $('#area2').css('top',(0-(scrolled*.5))+'px'); $('#area3').css('top',(0-(scrolled*.25))+'px'); }); });
三个区域都是绝对定位,只不过z-index的大小不同,这样当window滚动时,三个layer按不同速度滚动,基准速度是scroll,即window滚动的基本速度。
相关文章推荐
- 详解MySQL Server端如何发送结果集给客户端
- 114 CoreData基本使用
- ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据
- 字符数组三种写法
- 让终端窗口“下雪”的有趣指令
- 友盟分享统计
- Uploadify 控件上传图片 + 预览
- 几种 Java 序列化方案的性能比较
- 物联网安全思考
- PAT(Basic)-1002.写出这个数(20)
- 基于cyclone ii -EP2C20Q240C8N 的PLL时钟倍频设计
- 数据库列名无效原因
- lightoj 1341 算术基本定理
- awk、sed处理文件的简单例子
- strlen的使用问题
- SQL Server游标的使用
- Otto与EventBus框架比较
- 柏林森:购物中心需要大数据,场景化营销是着力点
- URAL 1297 Palindrome (回文+中心扩展)
- 基于SAE服务器的微信JsSDK测试