重庆男科医院 ,重庆妇科医院 ,重庆肛肠科 ,重庆最好的男科医院 ,重庆最好的妇科医院 ,重庆结石病医院

人人网 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/



posted on 2012-05-23 11:26  吉太君  阅读(166)  评论(0编辑  收藏  举报

导航

重庆最好的无痛人流医院 ,重庆最好的宫颈疾病医院 ,重庆最好的乳腺病医院 ,重庆最好的妇科肿瘤医院 ,重庆妇科炎症治疗医院