视差容错
来源:互联网 发布:mysql 查询死锁语句 编辑:程序博客网 时间:2024/04/30 02:34
1.背景内容滑动速度与滑动条滑动速度一致【随着滑动条而滑动】
解决方法:
将background-attachment 属性设置为 "scroll"(默认)
实例:
css:
.top1{background:url(../images/xxx.png) no-repeat;}
2.背景内容与滑动条滑动速度(或方向)不一致
解决方法:
实例:将background-attachment 属性设置为 "fixed" ,再在js中设置(计算)background-position;【若不设置background-position则背景图像将固定在设置的原始位置 ,滑动过程中不会发生改变】
css:
.top1{background:url(../images/xxx.png) no-repeat fixed;}
js:
$('.top1').parallax("50%", -0.1);//50%是x偏移量 -0.1是图像垂直滑动的速度,负号代表当向下滑动时方向是向下、数值的绝对值越大越快
代码参考:
page.js
$('.top1').parallax("50%", -0.1);
parallax.js
// JavaScript Document(function( $ ){var $window = $(window);var windowHeight = $window.height();$window.resize(function () {windowHeight = $window.height();});$.fn.parallax = function(xpos, speedFactor, outerHeight) {var $this = $(this);var getHeight;var firstTop;var paddingTop = 0;//get the starting position of each element to have parallax applied to it$this.each(function(){firstTop = $this.offset().top;});if (outerHeight) {getHeight = function(jqo) {return jqo.outerHeight(true);};} else {getHeight = function(jqo) {return jqo.height();};}// setup defaults if arguments aren't specifiedif (arguments.length < 1 || xpos === null) xpos = "50%";if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;if (arguments.length < 3 || outerHeight === null) outerHeight = true;// function to be called whenever the window is scrolled or resizedfunction update(){var pos = $window.scrollTop();$this.each(function(){var $element = $(this);var top = $element.offset().top;var height = getHeight($element);// Check if totally above or totally below viewportif (top + height < pos || top > pos + windowHeight) {return;}$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");});}$window.bind('scroll', update).resize(update);update();};})(jQuery);
0 0
- 视差容错
- 容错
- 容错
- ParallaxNode视差
- 视差滚动
- 视差特效
- 视差特效
- 视差特效
- 视差滚动
- 视差特效
- UV视差
- 视差效果
- 视差动画
- 视差动画
- 容错输入
- 容错机制
- spark-容错
- Sqoop:容错
- Windows驱动开发:用C还是C++
- JavaScript 10分钟入门
- shell脚本 逐行读取文本并且 进行字符串的截取
- Can't create handler inside thread that has not called Looper.prepare()
- JAVA中几种集合(List、Set和Map)的区别
- 视差容错
- Android studio错误:IllegalArgumentException: Unable to locate adb
- 编程:等式变换
- 竞品分析和产品分析,你究竟搞清楚了么?
- JavaScript 风格指南/编码规范(Airbnb公司版)
- 搜索框简易处理方式
- Oracle ERP 的前世今生
- [Android Studio] Gradle项目中添加JNI生成文件(.so文件)
- 断舍离