jq中parallax的参数xjq 获取positionn什么意思

来源：蜘蛛抓取(WebSpider) 时间：2016-10-24 04:43 标签： jq修改position
推荐这篇日记的豆列
······P.s. &博主前端新手，还请大家包涵了~
令可见我的,欢迎各位高手指教
视差滚动(Parallax Scrolling)效果页面的鼻祖，当属那款Nike Betterworld页面了（现已改版），页面上的图片、文字等内容随着滚轮的滚动而以不同的速度滚动，形成了一种新颖独特的视觉效果。其基本原理是让多层背景以不同的速度移动。
比如下面这个页面：
还有21个精彩的视差滚动示例
视差滚动的历史
视差滚动其实有着很悠久的历史了，,这种效果来自于2D卷轴游戏，比如经典的超级玛丽，细细回顾，当电视机(:-P)屏幕随着马里奥大叔的跑动而滚动时，天空的云朵并不是以相同速度而滚动的。
而如今，伟大的Web设计师们，把这个生动奇妙的效果用在了Web上。视差滚动效果页面很适合专题网站的制作，比如公司的招聘页面，新产品发布介绍页面，相关活动页面等。
视差滚动的原理
上面已经提及，其基本原理是让多层背景以不同的速度移动。即通过JavaScript时刻获取当前页面以滚动的高度，并以不同速度调整各个元素背景图的高度。由于笔者js水平有限，无法独立完成视差滚动js代码的编写，因为目前网络上暂时没有任何与视差滚动的实现有关的资料，在此提供一个好用的jQuery插件，以供参考。
视差滚动的实现
教程（英文）: &
在这里 & &&
使用方法：
jQuery Parallax 的使用很简单，以创建中的页面为例，首先写好基本的HTML，也就是header,footer以及4个div元素用于盛放内容。
同时在&head&标签中引用该插件的js文件和jQuery库。并在&script&标签中添加以下代码：
&script type="text/javascript"&
$(document).ready(function(){
//.parallax(xPosition, adjuster, inertia, outerHeight) options:
//xPosition - Horizontal position of the element
//adjuster - y position to start from
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#div1').parallax("50%", 73, 0, true);
以上代码中，关键是对需要产生视差滚动效果的元素执行parallax函数，parallax函数有四个参数：xPosition,adjuster,inertia,,outerHeight.
xPosition:指定元素的水平位置
adjuster:滚动起始点的y坐标
inertia:指定元素相对于垂直滚动的速度。比如：设定为0.1时，改元素的滚动速度将会是页面滚动速度的十 & & 分之一。
outerHeight:(该项笔者不明白其用法，还请大家指教了)。
对于需要实现视差滚动的元素，其CSS规则必须包含以下内容并使其有效：
background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
color: white;
height: 600px;
margin: 0;
padding: 160px 0 0 0;
为了在高分辨率显示器上也能得到不错的显示效果，建议添加background-color属性。
1.如果background 属性设置出现问题，就无法正常使用该插件。
2.该插件实现的视差滚动效果只能应用于有背景图的元素，据我了解，其它类似插件也都是应用于有背景图的元素，貌似这样才不会使元素发生抖动。
Ok~大功告成！事情就是这么简单，这篇文章实在没什么营养，权当充充数吧，还请各位轻拍了
阅读(...) 评论()Parallax - Wikipediabackground-position-x的兼容性问题 - 农民工老李 - 博客园
随笔 - 30, 文章 - 1, 评论 - 18, 引用 - 0
在firefox中，不支持background-position-x和background-position-y属性。在ie 、chrome等流览器则支持该属性。
为兼容firefox和 ie 需要将此属性改写成 background-position:
在使用jquery设置时，需要写成$(...).css("background-position","20 30px");

我要回帖

更多关于 jq修改position 的文章

 

随机推荐