当前位置: 首页 > 编程日记 > 正文

人人网 6.0 版申请页面随着滚动条拖动背景图片滚动出现的原理

第一步是考虑静态实现。整个页面分成几大块,比如:

<div class="section" id="topic-a"></div>

<div class="section" id="topic-b"></div>

<div class="section" id="topic-c"></div>

每个div.section有个背景图,同时根据设计需要嵌套多个背景图层,就像:

<div class="section" id="topic-a">

<div class="content">这里放内容</div>

<div class="bg1"></div>

<div class="bg2"></div>

</div>

nike那个只有一个和section的背景组合。renren是多个。每个内嵌的背景图层的background-attachment一定要设为fixed。这样基本效果就出来了。

我认为nike那个比renren好的在于,每个div.section的背景的background-attachment有的也设为fixed(要设计一个更大的背景图),这样配合后面javascript营造出的前景、背景不同移动速率的效果会更有动感。

第二步做出更动感的效果,这就要靠javascript了。基本原理就是重庆尿结石的治疗滚动时调整嵌套背景图层的background-position的y轴值。难点在于节奏感要对。renren的应该是绑在mousewheel事件上,利用返回的值,调整背景图的y值。我更喜欢nike的做法,它是绑在onscroll事件上,不用引额外的mousewheel插件,判断当前div.section的offset,调整背景图的y值,通过调整计算公式,可以让这种快慢的感觉更强一些。

原理其实挺简单。关键要把这种感觉做出来,里面的细节还是很多的。另外,应该把background-size也加上,这样改变窗口大小时更完美。

推荐个我的51博客——君射臣决 - http://5078742.blog.51cto.com/



转载于:https://www.cnblogs.com/jitai/archive/2012/05/23/2514503.html

相关文章:

Python内部类,内部类调用外部类属性,方法

一 Python中内部类 典型定义&#xff1a; class MyOuter:age18def __init__(self,name):self.namenameclass MyInner:def __init__(self,inner_name):self.inner_nameinner_nameoutMyOuter(lqz) innerout.MyInner(lqz_inner) print(inner.inner_name) 二 内部类调用外部类的类属…

POJ 2528 Mayor's posters(线段树)

题目大意 贴海报。每张海报的高度都是一样的&#xff0c;唯独宽度不一样。每张海报只能占用整数倍的单位线段长度&#xff0c;贴了 n(n<10000) 张海报之后&#xff0c;有几张能够看见&#xff08;有一个角能看见这张海报也算被看见了&#xff09;&#xff1f;海报的宽度最大…

xmind 模板_xmind模板打包下载

500套xmind模板【分类整合】好东西分享啦&#xff01;~百度网盘下载链接&#xff1a;https://pan.baidu.com/s/1pCf8aqM8R8m4U4oWZUfOUA提取码&#xff1a;xt1j 微云盘下载连接&#xff1a; https://share.weiyun.com/5c3vehsXMind中的思维导图结构包含一个中心根主题&#xff…

Pycharm的运行和简单调试

我这里已经简单的创建了一个文件&#xff0c;为了浅显易懂&#xff0c;这里程序写的比较简单 1. 运行程序 首先&#xff0c;找到编辑窗口上面有一个向下方向的灰色箭头&#xff0c;点击它 点击之后&#xff0c;选择第一个选项edit Configurations&#xff0c;然后在弹出…

为什么百度只收录我的网站首页?

在我们做SEO的时候&#xff0c;经常碰到一个常见的问题&#xff0c;百度只收录网站的首页或者是一夜之间网站的收录变成了只剩首页。出现这种情况的原因很多&#xff0c;我们需要去检查自己的问题&#xff0c;然后去解决&#xff0c;让自己的网站重新获得更多页面的收录&#x…

Python3.5 学习十二 数据库介绍

MYSQL介绍&#xff1a; 主流三种数据库&#xff1a;Oracle、Mysql、Sqlserver Mysql安装和启动&#xff1a; windows 1安装 2启动服务 3进入bin目录&#xff0c;打开命令行 4 mysqladmin -u root password ******* 设置密码 5 mysql -u root -p 使用密码登录 显示所有数据…

github上删除一个仓库

首先进入到你需要删除的仓库&#xff0c;在这个页面的左侧或者上部找到”settings”选项 点击进入”settings”&#xff0c;然后一直往下拉&#xff0c;直到看到一个红色的横条区域&#xff0c;下面有一个”Delet this respository”&#xff0c;点击删除即可

两个线程同时访问一个变量_百战程序员:Java多线程对象及变量的并发访问

在开发多线程程序时&#xff0c;如果每个多线程处理的事情都不一样&#xff0c;每个线程都互不相关&#xff0c;这样开发的过程就非常轻松。但是很多时候&#xff0c;多线程程序是需要同时访问同一个对象&#xff0c;或者变量的。这样&#xff0c;一个对象同时被多个线程访问&a…

AE 9.3代码 升级到AE10.0

下载的代码是AE 9.3&#xff0c;本机配置是AE 10.0 &#xff0c;程序打不开&#xff0c;运行不了&#xff0c;提示找不到ESRI.ArcGIS.Controls.AxMapCongrol等等AE 控件。 具体解决方法&#xff1a; &#xff08;1&#xff09; 在引用中&#xff0c;重新添加ArcGIS引用&#xf…

mysql数据库主从同步过程详述(三)

续mysql数据库主从同步过程详述(二)在此说明下:在最后试验过程中,当查看从库状态的时候,IO_Running显示为no,从error_log中看到如下报错提示:120523 0:55:31 [Note] Slave I/O thread: connected to master rep192.168.1.5:3306, replication started in log mysql-bin.0000…

[No0000160]常用C# 正则表达式大全

正则表达式的本质是使用一系列特殊字符模式&#xff0c;来表示某一类字符串。正则表达式无疑是处理文本最有力的工具&#xff0c;而.NET提供的Regex类实现了验证正则表达式的方法。Regex 类表示不可变&#xff08;只读&#xff09;的正则表达式。它还包含各种静态方法&#xff…

在VS中,如何新建项目,如何添加类库

学习了C#基础后就自己做了一个小小的qq空间&#xff0c;感觉挺好的。之后&#xff0c;由于团队需要被分配到测试方面去了&#xff0c;虽然测试时会看C#代码&#xff0c;但终究不是自己写的&#xff0c;没有那种深究的热情&#xff0c;尽管师兄说&#xff0c;看代码是最快提升的…

Python中requests包的安装

在使用pycharm开发的时候&#xff0c;我们经常需要导入一些包&#xff0c;但是这些包&#xff0c;我们事先并没有安装&#xff0c;一个显著的现象就是我们在pycharm中导入一个包时&#xff0c;系统提示不存在&#xff0c;那就是我们没有安装这个包。举一个例子&#xff0c;我在…

python fft库有哪些_Python图像处理库PIL中快速傅里叶变换FFT的实现(一)

离散傅里叶变换(discrete Fouriertransform)傅里叶分析方法是信号分析的最基本方法&#xff0c;傅里叶变换是傅里叶分析的核心&#xff0c;通过它把信号从时间域变换到频率域&#xff0c;进而研究信号的频谱结构和变化规律。FFT是一种DFT的高效算法&#xff0c;称为快速傅立叶变…

转: Android ListView 滑动背景为黑色的解决办法

2019独角兽企业重金招聘Python工程师标准>>> 在Android中&#xff0c;ListView是最常用的一个控件&#xff0c;在做UI设计的时候&#xff0c;很多人希望能够改变一下它的背景&#xff0c;使他能够符合整体的UI设计&#xff0c;改变背景背很简单只需要准备一张图片然…

BZOJ1901Zju2112 Dynamic Rankings——树状数组套主席树

题目描述 给定一个含有n个数的序列a[1],a[2],a[3]……a[n]&#xff0c;程序必须回答这样的询问&#xff1a;对于给定的i,j,k&#xff0c;在a[i],a[i1],a[i2]……a[j]中第k小的数是多少(1≤k≤j-i1)&#xff0c;并且&#xff0c;你可以改变一些a[i]的值&#xff0c;改变后&#…

Git与github基本操作

一. git安装与简单配置 1. git的安装 首先进入git的官方网站git-scm.com 下载自己电脑对应的git版本&#xff0c;然后点击安装即可 点击上图的红色部分进行下载 安装的时候直接默认即可 找到你的Git安装位置&#xff0c;把快捷方式中的git bash发送到桌面&#xff0…

容器 root权限运行_【漏洞通告】Containerd容器逃逸漏洞通告 (CVE202015257)

2020年12月1日&#xff0c;Containerd发布更新&#xff0c;修复了一个可造成容器逃逸的漏洞CVE-2020-15257&#xff0c;并公开了相关说明。通过受影响的API接口&#xff0c;攻击者可以利用该漏洞以root权限执行代码&#xff0c;实现容器逃逸。深信服安全研究团队依据漏洞重要性…

IOS成长之路-NSMutableURLRequest实现Post请求

NSData *bodyData [[bodyString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]dataUsingEncoding:NSUTF8StringEncoding];//把bodyString转换为NSData数据 NSURL *serverUrl [[NSURL URLWithString:RequestUrl] URLByAppendingPathComponent:urlStr];//获…

rsync ssh文件同步

参考链接 下载 manual #rsync -avP -e ssh ./filename root192.68.1.38:/root/paths/ &#xff08;本地到远程&#xff09; #rsync -avP -e ssh root192.68.1.38:/root/paths/test.tar.gz /root /paths &#xff08;远程到本地&#xff09; rsync -av --progress --inpl…

【转】Linux思维导图

【原文】https://www.toutiao.com/i6591690511763898888/ 1、Linux学习路径&#xff1a; 2、Linux桌面介绍&#xff1a; 3、FHS(文件系统目录标准)&#xff1a; 4、Linux需要特别注意的目录&#xff1a; 5、Linux 内核学习路线&#xff1a; 6、Linux Security Coaching&#xf…

Python中lxml库的安装(Windows平台)

之前写过《Python中requests包的安装》&#xff0c;今天我需要安装lxml库&#xff0c;这里我尝试之前安装requests方式&#xff0c;但是没有成功&#xff0c;几经周折&#xff0c;终于总结出来了一个方法&#xff0c;这里拿出来给大家分享。 首先就是自己的电脑已经安装好了Py…

hadoop fs命令无法使用_「大数据」「Hadoop」HDFS的配置与管理

HDFS(Hadoop Distributed File System)是Hadoop三个基础组件之一&#xff0c;为另外的组件以及大数据生态中的其他组件提供了最基本的存储功能&#xff0c;具有高容错、高可靠、可扩展、高吞吐率等特点。HDFS运行在java环境中&#xff0c;因此我们都需要安装JDK。安装完成之后是…

Oracle 触发器 Update 不能操作本表的疑问

今天要解决一个需求&#xff0c;类似表A有个字段叫flag存储的是0 or 1 &#xff0c;当一行记录更改为1的时候&#xff0c;其他行同字段要变为0。 这样的需求第一个思路想尝试下能否用触发器来实现 create or replace trigger tr_equiptreeweatherstation before UPDATE ON con…

前景检测算法_3(GMM)

摘要 本文通过opencv来实现一种前景检测算法——GMM&#xff0c;算法采用的思想来自论文[1][2][4]。在进行前景检测前&#xff0c;先对背景进行训练&#xff0c;对图像中每个背景采用一个混合高斯模型进行模拟&#xff0c;每个背景的混合高斯的个数可以自适应。然后在测试阶段&…

ADO.Net五个对象

Connection Command DataAdapter DataSet DataReader 取5个单词的首字母CCDDD&#xff0c;在拼音输入法里面打一下&#xff0c;出来5个字&#xff0c;然后就记忆为曹操打豆豆。 制作了一张图片&#xff0c;用来帮助记忆曹操打豆豆。 Reference ADO.NET的五大对象转载于:ht…

XPath与多线程爬虫

一. Xpath的介绍与配置 1. XPath是什么 XPath是一门语言 XPath可以在XML文档中查找信息 XPath支持HTML XPath通过元素和属性进行导航 总结&#xff1a; XPath可以用来提取信息&#xff08;和正则表达式类似&#xff09; XPath比正则表达式更加厉害 XPath比正则表…

html无序列表空心圆_列表样式的使用CSS入门基础(018)

今天我们分享关于列表样式的内容。列表项list-sytle-type&#xff1a;在HTML学习中&#xff0c;我们知道有有序列表和无序列表&#xff0c;都是使用type属性来定义的。1、有序列表有序列表 有序列表 有序列表 属性值type&#xff1a;1&#xff0c;数字1、2、3……&#xff1b…

2013年3月百度之星B题

Sigma Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Problem Description 小H是一个程序员。他很喜欢做各种各样的数学题&#xff0c;尤其喜欢做《水泥数学》。 在看了《水泥数学》的2.5章后&#xff0c;小H终于会用9种计算 1^22^2...n^…

TCP/IP 10.1集成IS-IS协议

樱桃小小的 软软的甜甜的好吃哈&#xff01;感谢上帝 &#xff0c; 恩呢 &#xff0c; 让我吃的这么满足&#xff0c;开心&#xff01;第十章 集成IS-IS协议建议在学习ISIS的时候联系2个<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office"…